Icon Rail

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

export interface IconRailItem {
  label: string;
  href: string;
  icon: LucideIcon;
  badge?: number;
}

export interface IconRailProps {
  brand?: string;
  items?: IconRailItem[];
  bottomItems?: IconRailItem[];
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

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

function RailLink({ item, active }: { item: IconRailItem; active: boolean }) {
  const Icon = item.icon;
  return (
    <a
      href={item.href}
      aria-current={active ? "page" : undefined}
      className={cn(
        "da-focus da-transition group/rail relative grid size-12 place-items-center border-[length:var(--da-border-width)]",
        active ? "border-da-border bg-da-primary text-da-primary-fg shadow-da-sm" : "border-transparent hover:border-da-border hover:bg-da-surface",
      )}
    >
      <Icon aria-hidden className="size-5" strokeWidth={2.25} />
      <span className="sr-only">{item.label}</span>
      {item.badge ? (
        <span aria-hidden className="da-stroke absolute -top-1.5 -right-1.5 grid h-5 min-w-5 place-items-center bg-da-danger px-0.5 font-da-mono text-[10px] font-bold text-da-danger-fg">
          {item.badge}
        </span>
      ) : null}
      {/* Tooltip on hover and keyboard focus */}
      <span
        aria-hidden
        className="da-stroke pointer-events-none absolute left-full z-20 ml-3 hidden bg-da-fg px-2 py-1 font-da-mono text-xs font-bold whitespace-nowrap text-da-bg uppercase group-hover/rail:block group-focus-visible/rail:block"
      >
        {item.label}
      </span>
    </a>
  );
}

export function IconRail({
  brand = "S",
  items = DEFAULT_ITEMS,
  bottomItems = [{ label: "Settings", href: "#settings", icon: Settings }],
  activeHref = "#releases",
  children,
  className,
}: IconRailProps) {
  return (
    <div className={cn("flex min-h-full bg-da-bg text-da-fg", className)}>
      <nav aria-label="Main" className="da-stroke-r sticky top-0 flex h-dvh w-20 shrink-0 flex-col items-center gap-3 bg-da-surface-2 py-4">
        <span aria-hidden className="da-stroke mb-3 grid size-12 place-items-center bg-da-fg font-da-display text-xl text-da-bg">
          {brand}
        </span>
        <ul className="flex flex-1 flex-col gap-2">
          {items.map((i) => (
            <li key={i.href}>
              <RailLink item={i} active={i.href === activeHref} />
            </li>
          ))}
        </ul>
        <ul className="flex flex-col gap-2">
          {bottomItems.map((i) => (
            <li key={i.href}>
              <RailLink item={i} active={i.href === activeHref} />
            </li>
          ))}
        </ul>
      </nav>
      <main className="min-w-0 flex-1">{children}</main>
    </div>
  );
}

export default IconRail;