Sidebar Collapsible

"use client";

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

export interface SidebarCollapsibleItem {
  label: string;
  href: string;
  icon: LucideIcon;
}

export interface SidebarCollapsibleProps {
  brand?: string;
  items?: SidebarCollapsibleItem[];
  activeHref?: string;
  defaultCollapsed?: boolean;
  onCollapsedChange?: (collapsed: boolean) => void;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_ITEMS: SidebarCollapsibleItem[] = [
  { label: "Home", href: "#home", icon: Home },
  { label: "Releases", href: "#releases", icon: FileText },
  { label: "Announcements", href: "#announcements", icon: Bell },
  { label: "Analytics", href: "#analytics", icon: BarChart3 },
  { label: "Integrations", href: "#integrations", icon: Plug },
  { label: "Settings", href: "#settings", icon: Settings },
];

export function SidebarCollapsible({
  brand = "Shipyard",
  items = DEFAULT_ITEMS,
  activeHref = "#analytics",
  defaultCollapsed = false,
  onCollapsedChange,
  children,
  className,
}: SidebarCollapsibleProps) {
  const [collapsed, setCollapsed] = useState(defaultCollapsed);
  const toggle = () => {
    setCollapsed((c) => !c);
    onCollapsedChange?.(!collapsed);
  };

  return (
    <div className={cn("flex min-h-full bg-da-bg text-da-fg", className)}>
      <aside
        className={cn(
          "da-stroke-r sticky top-0 flex h-dvh shrink-0 flex-col bg-da-surface-2 transition-[width] duration-(--da-duration-slow) ease-da-emphasized motion-reduce:transition-none",
          collapsed ? "w-[76px]" : "w-64",
        )}
      >
        <div className="da-stroke-b flex h-16 items-center gap-3 overflow-hidden px-4">
          <span aria-hidden className="da-stroke grid size-10 shrink-0 place-items-center bg-da-primary font-da-display text-da-primary-fg">
            {brand[0]}
          </span>
          <span className={cn("font-da-display text-lg tracking-da-display whitespace-nowrap uppercase", collapsed && "sr-only")}>{brand}</span>
        </div>
        <nav aria-label="Sidebar" className="flex-1 overflow-x-hidden overflow-y-auto p-3">
          <ul className="flex flex-col gap-1.5">
            {items.map((item) => {
              const Icon = item.icon;
              const active = item.href === activeHref;
              return (
                <li key={item.href}>
                  <a
                    href={item.href}
                    aria-current={active ? "page" : undefined}
                    title={collapsed ? item.label : undefined}
                    className={cn(
                      "da-focus da-transition flex h-11 items-center gap-3 border-[length:var(--da-border-width)] px-3 font-bold whitespace-nowrap",
                      active ? "border-da-border bg-da-fg text-da-bg shadow-da-sm" : "border-transparent hover:border-da-border hover:bg-da-surface",
                    )}
                  >
                    <Icon aria-hidden className="size-5 shrink-0" strokeWidth={2.25} />
                    <span className={cn(collapsed && "sr-only")}>{item.label}</span>
                  </a>
                </li>
              );
            })}
          </ul>
        </nav>
        <button
          type="button"
          onClick={toggle}
          aria-expanded={!collapsed}
          aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
          className="da-focus da-stroke-t flex h-12 items-center justify-center gap-2 font-da-mono text-xs font-bold uppercase hover:bg-da-primary hover:text-da-primary-fg"
        >
          {collapsed ? <ChevronsRight aria-hidden className="size-5" /> : <ChevronsLeft aria-hidden className="size-5" />}
          {!collapsed && "Collapse"}
        </button>
      </aside>
      <main className="min-w-0 flex-1">{children}</main>
    </div>
  );
}

export default SidebarCollapsible;