কম্পোনেন্ট-ভিত্তিক UI — মূল ধারণা

# vnode কাঠামো: {"tag": ..., "props": {...}, "children": [...]}
# প্রতিটি কম্পোনেন্ট একটি ফাংশন -- props নেয়, vnode রিটার্ন করে

def Avatar(name, url):
    """ছোট, একক-দায়িত্বশীল কম্পোনেন্ট -- শুধু একটি ছবি রেন্ডার করে"""
    return {"tag": "img", "props": {"src": url, "alt": name}, "children": []}


def Button(label, variant="primary"):
    """আরেকটি ছোট কম্পোনেন্ট -- একটি বাটন রেন্ডার করে"""
    return {"tag": "button", "props": {"class": f"btn btn-{variant}"}, "children": [label]}


def UserCard(name, email, avatar_url):
    """মাঝারি কম্পোনেন্ট -- Avatar ও Button কম্পোজ করে গঠিত"""
    return {
        "tag": "div",
        "props": {"class": "user-card"},
        "children": [
            Avatar(name, avatar_url),
            {
                "tag": "div",
                "props": {"class": "user-info"},
                "children": [
                    {"tag": "h3", "props": {}, "children": [name]},
                    {"tag": "p", "props": {}, "children": [email]},
                ],
            },
            Button("প্রোফাইল দেখুন", variant="secondary"),
        ],
    }


def UserList(users):
    """সবচেয়ে বড় কম্পোনেন্ট -- একাধিক UserCard কম্পোজ করে"""
    return {
        "tag": "div",
        "props": {"class": "user-list"},
        "children": [UserCard(**u) for u in users],
    }


def print_vnode(vnode, indent=0):
    """vnode ট্রি রিকার্সিভভাবে প্রিন্ট করার সাহায্যকারী ফাংশন"""
    pad = "  " * indent
    if isinstance(vnode, str):
        print(f"{pad}\"{vnode}\"")
        return
    props_str = f" props={vnode['props']}" if vnode["props"] else ""
    print(f"{pad}<{vnode['tag']}>{props_str}")
    for child in vnode["children"]:
        print_vnode(child, indent + 1)


# তিনজন ইউজারের ডেটা -- এটা আসতে পারত একটি API রেসপন্স থেকে
users_data = [
    {"name": "রহিম উদ্দিন", "email": "rahim@example.com", "avatar_url": "/img/rahim.png"},
    {"name": "করিম আহমেদ", "email": "karim@example.com", "avatar_url": "/img/karim.png"},
]

app_tree = UserList(users_data)

print("সম্পূর্ণ কম্পোজড UI-ট্রি:\n")
print_vnode(app_tree)

# যাচাই: root কম্পোনেন্ট ২টি UserCard কম্পোজ করেছে কি না
card_count = len(app_tree["children"])
print(f"\nমোট কম্পোজ-করা UserCard সংখ্যা: {card_count}")
print(f"প্রতিটি UserCard-এর সন্তান সংখ্যা: {len(app_tree['children'][0]['children'])} (Avatar + তথ্য + Button)")