Sidebar Dual

"use client";

import { useState, type ReactNode } from "react";
import { BarChart3, FileText, Plug, Settings, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarDualSection {
  id: string;
  label: string;
  icon: LucideIcon;
  links: { label: string; href: string; count?: number }[];
}

export interface SidebarDualProps {
  sections?: SidebarDualSection[];
  defaultSection?: string;
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_SECTIONS: SidebarDualSection[] = [
  {
    id: "releases",
    label: "Releases",
    icon: FileText,
    links: [
      { label: "All releases", href: "#all", count: 142 },
      { label: "Drafts", href: "#drafts", count: 3 },
      { label: "Scheduled", href: "#scheduled", count: 1 },
      { label: "Templates", href: "#templates" },
    ],
  },
  {
    id: "insights",
    label: "Insights",
    icon: BarChart3,
    links: [
      { label: "Overview", href: "#overview" },
      { label: "Widget", href: "#widget-stats" },
      { label: "Digests", href: "#digest-stats" },
    ],
  },
  {
    id: "integrations",
    label: "Integrations",
    icon: Plug,
    links: [
      { label: "GitHub", href: "#github" },
      { label: "Slack", href: "#slack" },
      { label: "Linear", href: "#linear" },
    ],
  },
  {
    id: "settings",
    label: "Settings",
    icon: Settings,
    links: [
      { label: "Workspace", href: "#workspace" },
      { label: "Members", href: "#members" },
      { label: "Billing", href: "#billing" },
    ],
  },
];

export function SidebarDual({ sections = DEFAULT_SECTIONS, defaultSection = "releases", activeHref = "#all", children, className }: SidebarDualProps) {
  const [current, setCurrent] = useState(defaultSection);
  const section = sections.find((s) => s.id === current) ?? sections[0];

  return (
    <div className={cn("flex min-h-full bg-da-bg text-da-fg", className)}>
      <div className="sticky top-0 flex h-dvh shrink-0">
        <nav aria-label="Sections" className="da-stroke-r flex w-[72px] flex-col items-center gap-2 bg-da-fg py-4 text-da-bg">
          {sections.map((s) => {
            const Icon = s.icon;
            const on = s.id === section?.id;
            return (
              <button
                key={s.id}
                type="button"
                aria-pressed={on}
                aria-label={s.label}
                title={s.label}
                onClick={() => setCurrent(s.id)}
                className={cn("da-focus grid size-12 place-items-center border-[length:var(--da-border-width)]", on ? "border-da-bg bg-da-primary text-da-primary-fg" : "border-transparent hover:border-da-bg")}
              >
                <Icon aria-hidden className="size-5" />
              </button>
            );
          })}
        </nav>
        {section && (
          <nav aria-label={section.label} className="da-stroke-r hidden w-56 flex-col bg-da-surface-2 sm:flex">
            <p className="da-stroke-b flex h-16 items-center px-4 font-da-display text-lg tracking-da-display uppercase">{section.label}</p>
            <ul className="flex flex-col gap-1 p-3">
              {section.links.map((l) => {
                const active = l.href === activeHref;
                return (
                  <li key={l.href}>
                    <a
                      href={l.href}
                      aria-current={active ? "page" : undefined}
                      className={cn("da-focus flex items-center justify-between px-3 py-2 font-bold", active ? "da-stroke bg-da-primary text-da-primary-fg" : "hover:bg-da-surface")}
                    >
                      {l.label}
                      {l.count !== undefined && <span className="font-da-mono text-xs">{l.count}</span>}
                    </a>
                  </li>
                );
              })}
            </ul>
          </nav>
        )}
      </div>
      <main className="min-w-0 flex-1">{children}</main>
    </div>
  );
}

export default SidebarDual;