Sidebar Rail

import type { ReactNode } from "react";
import { CalendarDays, Home, Inbox, LayoutGrid, Settings, Users, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export interface SidebarRailProps {
  items?: { label: string; href: string; icon: LucideIcon; tone: "peach" | "mint" | "lavender" | "butter" }[];
  activeHref?: string;
  user?: { name: string; emoji: string };
  children?: ReactNode;
  className?: string;
}

const TONES = {
  peach: "bg-da-accent text-da-accent-fg",
  mint: "bg-da-secondary text-da-secondary-fg",
  lavender: "bg-da-primary/15 text-da-primary",
  butter: "bg-da-warning/35 text-da-fg",
} as const;

/** Slim rounded icon rail: round icon buttons whose active item fills with its own pastel color, labels as tooltips, emoji avatar at the bottom; bottom bar on mobile. */
export function SidebarRail({
  items = [
    { label: "Home", href: "#home", icon: Home, tone: "lavender" },
    { label: "Inbox", href: "#inbox", icon: Inbox, tone: "peach" },
    { label: "Boards", href: "#boards", icon: LayoutGrid, tone: "mint" },
    { label: "Calendar", href: "#calendar", icon: CalendarDays, tone: "butter" },
    { label: "Team", href: "#team", icon: Users, tone: "lavender" },
  ],
  activeHref = "#boards",
  user = { name: "Ana Souza", emoji: "🦊" },
  children,
  className,
}: SidebarRailProps) {
  const link = (it: (typeof items)[number], tooltip: boolean) => {
    const active = it.href === activeHref;
    return (
      <a
        href={it.href}
        aria-current={active ? "page" : undefined}
        className={cn(
          "da-focus group relative grid size-12 place-items-center rounded-full transition-[background-color,scale] duration-(--da-duration) ease-da-emphasized hover:scale-105",
          active ? TONES[it.tone] : "text-da-muted-fg hover:bg-da-surface",
        )}
      >
        <it.icon aria-hidden className="size-5" />
        <span className="sr-only">{it.label}</span>
        {tooltip && (
          <span
            aria-hidden
            className="pointer-events-none absolute left-full z-20 ml-3 rounded-da-pill bg-da-fg px-3 py-1.5 text-sm font-semibold whitespace-nowrap text-da-bg opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100"
          >
            {it.label}
          </span>
        )}
      </a>
    );
  };
  return (
    <div className={cn("min-h-dvh bg-da-bg text-da-fg md:flex", className)}>
      <aside className="sticky top-0 hidden h-dvh p-3 md:block">
        <div className="flex h-full w-[72px] flex-col items-center gap-2 rounded-[28px] bg-da-surface-2 py-4">
          <span aria-hidden className="mb-3 grid size-11 place-items-center rounded-da-md bg-da-primary text-lg">
            🌱
          </span>
          <nav aria-label="Main" className="flex flex-1 flex-col gap-2">
            {items.map((it) => (
              <span key={it.href}>{link(it, true)}</span>
            ))}
          </nav>
          {link({ label: "Settings", href: "#settings", icon: Settings, tone: "lavender" }, true)}
          <span role="img" aria-label={user.name} className="mt-1 grid size-11 place-items-center rounded-full bg-da-accent text-xl">
            {user.emoji}
          </span>
        </div>
      </aside>
      <main className="min-w-0 flex-1 pb-24 md:pb-0">{children}</main>
      <nav aria-label="Main" className="fixed inset-x-3 bottom-3 z-30 flex justify-around rounded-[28px] bg-da-surface p-2 shadow-da-lg md:hidden">
        {items.map((it) => (
          <span key={it.href}>{link(it, false)}</span>
        ))}
      </nav>
    </div>
  );
}

export default SidebarRail;