import reflex as rx
from ..state.auth import AuthState

def sidebar_item(text: str, icon: str, href: str):
    return rx.link(
        rx.hstack(
            rx.icon(icon, size=18),
            rx.text(text, size="3", weight="medium"),
            spacing="3",
            align_items="center",
            padding="12px",
            border_radius="8px",
            _hover={"bg": "var(--gray-3)"},
            color="var(--gray-11)"
        ),
        href=href,
        width="100%",
        text_decoration="none"
    )

def dashboard_layout(content: rx.Component):
    return rx.flex(
        # Sidebar
        rx.vstack(
            rx.heading("Obsidian Automator", size="4", margin_bottom="6", color="var(--accent-9)"),
            
            sidebar_item("Dashboard", "layout-dashboard", "/"),
            sidebar_item("Settings", "settings", "/settings"),
            
            rx.spacer(),
            
            rx.button(
                rx.hstack(rx.icon("log-out"), rx.text("Logout")),
                on_click=AuthState.logout,
                variant="ghost",
                width="100%",
                justify_content="start"
            ),
            
            width="250px",
            height="100vh",
            padding="6",
            bg="var(--gray-2)",
            border_right="1px solid var(--gray-4)",
        ),
        
        # Main Content
        rx.box(
            content,
            flex="1",
            height="100vh",
            bg="var(--gray-1)",
            padding="8",
            overflow="auto",
        ),
        width="100vw",
        height="100vh",
    )