/* Sidebar — fixed-left nav. Loaded after Primitives.jsx */

function Sidebar({ active, onNavigate }) {
  const items = [
    { section: "Dashboard" },
    { id: "default",   label: "Default",   icon: <Icon.Dash size={16}/>, group: "Dashboard" },
    { id: "analytics", label: "Analytics", icon: <Icon.Stats size={16}/>, group: "Dashboard", arrow: true },
    { section: "Widgets" },
    { id: "stats",   label: "Statistics", icon: <Icon.Stats size={16}/>, group: "Widgets" },
    { id: "data",    label: "Data",       icon: <Icon.Data  size={16}/>, group: "Widgets" },
    { id: "chart",   label: "Chart",      icon: <Icon.Chart size={16}/>, group: "Widgets" },
    { section: "Applications" },
    { id: "chat",     label: "Chat",      icon: <Icon.Chat size={16}/>,    group: "Applications" },
    { id: "calendar", label: "Calendar",  icon: <Icon.Calendar size={16}/>,group: "Applications" },
    { id: "kanban",   label: "Kanban",    icon: <Icon.Grid size={16}/>,    group: "Applications" },
    { id: "customer", label: "Customer",  icon: <Icon.User size={16}/>,    group: "Applications" },
    { id: "invoice",  label: "Invoice",   icon: <Icon.Invoice size={16}/>, group: "Applications" },
    { id: "profile",  label: "Profile",   icon: <Icon.User size={16}/>,    group: "Applications", arrow: true },
    { id: "ecom",     label: "E-commerce",icon: <Icon.Cart size={16}/>,    group: "Applications", arrow: true },
  ];

  return (
    <aside className="sb">
      <div className="sb-brand">
        <img src="../../assets/tolbnet-icon.svg" alt=""/>
        <span className="name">TolbNet</span>
      </div>
      <nav className="sb-nav">
        {items.map((it, i) => it.section ? (
          <div key={i} className="sb-section">{it.section}</div>
        ) : (
          <div key={it.id}
               className={`sb-item ${active === it.id ? "active" : ""}`}
               onClick={() => onNavigate(it.id)}>
            {it.icon}
            <span>{it.label}</span>
            {it.arrow ? <Icon.Chev size={10} className="arrow"/> : null}
          </div>
        ))}
      </nav>

      <div className="sb-support">
        <div className="ill">🛟</div>
        <div className="t">Help?</div>
        <div className="s">Get to resolve query</div>
        <Button type="primary" size="md" style={{width:"100%"}}>Support</Button>
      </div>

      <div className="sb-user">
        <Avatar size={36}>SB</Avatar>
        <div>
          <div className="name">Stebin Ben</div>
          <div className="role">UI / UX Designer</div>
        </div>
      </div>
    </aside>
  );
}

window.Sidebar = Sidebar;