// Sidebar.jsx — primary nav + workspace switcher.
function Sidebar({ active, onNav, unread = 0 }) {
  const primary = [
    ["overview", "home", "Overview"],
    ["palettes", "palette", "Palettes", 20],
    ["components", "layers", "Components", 84],
    ["typography", "type", "Typography"],
    ["activity", "activity", "Activity", 7],
  ];
  const secondary = [
    ["library", "folder", "Library"],
    ["inbox", "inbox", "Inbox", unread || null],
    ["team", "users", "Team"],
    ["billing", "credit-card", "Billing"],
  ];

  const NavBtn = ([id, icon, label, count]) => (
    <button
      key={id}
      className={"nav-item" + (active === id ? " nav-item--active" : "")}
      onClick={() => onNav(id)}
    >
      <Icon name={icon} size={16} />
      <span>{label}</span>
      {count != null && <span className="nav-item__count">{count}</span>}
    </button>
  );

  return (
    <nav className="sidebar">
      <div className="sidebar__section">Workspace</div>
      {primary.map(NavBtn)}
      <div className="sidebar__section">Resources</div>
      {secondary.map(NavBtn)}
      <div style={{ flex: 1 }} />
      <button className={"nav-item" + (active === "billing" ? " nav-item--active" : "")} onClick={() => onNav("billing")}>
        <Icon name="sparkles" size={16} />
        <span>Upgrade</span>
        <span className="nav-item__count" style={{ background: "var(--primary)", color: "var(--primary-foreground)" }}>PRO</span>
      </button>
    </nav>
  );
}
window.Sidebar = Sidebar;