from typing import List, Tuple, Union

def MakeAttrs(css:str|Tuple[str, ...]|None, id:str|None, attributes: dict[str, str | None]|None) -> str:
    if not attributes:
        attributes = {}
    if css:
        attributes['class'] = " ".join(css) if isinstance(css, (list, tuple)) else css
    if id:
        attributes['id'] = id
    attrList: List[str] = []
    for key, value in attributes.items():
        if value:
            attrList.append(f'{key}="{value}"')
    return " " + " ".join(attrList)

class ComplexProxyLeaf():
    name:str = ""
    def __init__(self, name:str|None = None):
        if name:
            self.name = name
        self.attrs = None

    def props(self, css:str|Tuple[str, ...]|None, id:str|None, attributes: dict[str, str | None]|None):
        clone = self.__class__(self.name)
        clone.attrs = MakeAttrs(css, id, attributes)
        return clone

    def __call__(self, css:str|None = None, id:str|None = None):
        return self.props(css, id, {})
    
    def __repr__(self) -> str:
        return f'<{self.name}{self.attrs or ""}/>'

class ComplexProxyBranch(ComplexProxyLeaf):
    name:str = ""
    def __init__(self, name:str|None = None):
        if name:
            self.name = name
        self.attrs = None
    def __repr__(self) -> str:
        return f'<{self.name}{self.attrs or ""}></{self.name}>'
    def __getitem__(self, key:Union[str, 'ComplexProxyBranch', ComplexProxyLeaf, Tuple[Union[str, 'ComplexProxyBranch', ComplexProxyLeaf], ...]]) -> str:
        
        if isinstance(key, tuple):
            children = f'\n'.join(str(k) for k in key)
        else:
            children = str(key)

        return f'<{self.name}{self.attrs or ""}>\n{children}\n</{self.name}>'

class IMGTag(ComplexProxyLeaf):
    name = "img"
    def __call__(self, css:str|None = None, id:str|None = None, src:str|None = None):
        return self.props(css, id, {"src":src})
    
class ATag(ComplexProxyBranch):
    name = "a"
    def __call__(self, css:str|None = None, id:str|None = None, href:str|None = None, target:str|None = None):
        return self.props(css, id, {"href":href, "target":target})

IMG = IMGTag()
A = ATag()
BR = ComplexProxyLeaf("br")
DIV = ComplexProxyBranch("div")

print(
    DIV
    [
        "click here",
        BR,
        IMG(id="header.png"),
        A(css="test"),
        A["other?"],
        A(css="www.site.com")
        [
            IMG(id="image.png")
        ]
    ]
)