interface SidebarTab {
  name: string;
  icon?: string | null;
  badge?: number | null;
}

interface SidebarProps {
  appName: string;
  appIcon?: string | null;
  tabs: SidebarTab[];
  current: string;
  onSelect: (name: string) => void;
}

export function Sidebar({ appName, appIcon, tabs, current, onSelect }: SidebarProps) {
  const logoEl = appIcon ? (
    <span class="text-xl">{appIcon}</span>
  ) : (
    <div
      class="w-7 h-7 rounded-lg flex items-center justify-center text-xs font-bold"
      style={{ background: "var(--z-accent-dim)", color: "var(--z-accent-light)" }}
    >
      {appName.charAt(0).toUpperCase()}
    </div>
  );

  return (
    <div
      class="w-[220px] shrink-0 sticky top-0 h-screen overflow-y-auto"
      style={{ borderRight: "1px solid var(--z-border)", background: "var(--z-surface)" }}
    >
      <div class="flex items-center gap-2 px-4 py-4 mb-2" style={{ borderBottom: "1px solid var(--z-border)" }}>
        {logoEl}
        <span class="font-semibold text-sm">{appName}</span>
      </div>
      <nav class="px-2">
        {tabs.map((t) => {
          const active = t.name === current;
          return (
            <button
              key={t.name}
              onClick={() => onSelect(t.name)}
              class={`w-full flex items-center gap-2 px-3 py-2 my-0.5 rounded-[var(--z-radius-button)] text-[var(--z-font-md)] transition-all text-left ${
                active ? "font-medium" : ""
              }`}
              style={{
                background: active ? "var(--z-accent-dim)" : "transparent",
                color: active ? "var(--z-accent-light)" : "var(--z-muted)",
              }}
            >
              <span class="text-base w-5 text-center">{t.icon || "○"}</span>
              <span class="flex-1">{t.name}</span>
              {t.badge ? (
                <span
                  class="text-[var(--z-font-xs)] font-mono px-1.5 rounded-full"
                  style={{ background: "var(--z-accent-dim)", color: "var(--z-accent-light)" }}
                >
                  {t.badge}
                </span>
              ) : null}
            </button>
          );
        })}
      </nav>
    </div>
  );
}
