Sidebar Rail

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

export interface SidebarRailProps {
  items?: { label: string; href: string; icon: LucideIcon }[];
  activeHref?: string;
  children?: ReactNode;
  className?: string;
}

const DEFAULT_ITEMS = [
  { label: "Overview", href: "#overview", icon: Home },
  { label: "Footprint", href: "#footprint", icon: BarChart3 },
  { label: "Actions", href: "#actions", icon: Leaf },
  { label: "Suppliers", href: "#suppliers", icon: Truck },
  { label: "Reports", href: "#reports", icon: FileText },
];

function GroveMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 32 32" className={cn("size-8 shrink-0", className)}>
      <circle cx="16" cy="16" r="16" fill="var(--da-primary)" />
      <path d="M16 25V13" stroke="var(--da-primary-fg)" strokeWidth="2" strokeLinecap="round" />
      <path d="M16 17c-4 0-6.5-2.6-6.5-6.5 4 0 6.5 2.6 6.5 6.5Z" fill="var(--da-primary-fg)" opacity=".85" />
      <path d="M16 14c3.6 0 6-2.3 6-6-3.6 0-6 2.3-6 6Z" fill="var(--da-primary-fg)" />
    </svg>
  );
}

/** Slim round icon rail: circular icon links on a sand column, the active one a sage circle with a leaf-shaped marker; labels appear as soft tooltips on hover/focus; becomes a bottom tab bar on mobile. */
export function SidebarRail({ items = DEFAULT_ITEMS, activeHref = "#actions", children, className }: SidebarRailProps) {
  return (
    <div className={cn("flex min-h-dvh flex-col bg-da-bg text-da-fg md:flex-row", className)}>
      <nav
        aria-label="Main"
        className="fixed inset-x-0 bottom-0 z-40 flex items-center justify-around bg-da-surface-2 px-2 py-2 md:sticky md:top-0 md:h-dvh md:w-20 md:flex-col md:justify-start md:gap-3 md:py-5"
      >
        <GroveMark className="mb-6 hidden size-10 md:block" />
        {items.map((it) => {
          const on = it.href === activeHref;
          return (
            <a
              key={it.href}
              href={it.href}
              aria-current={on ? "page" : undefined}
              className={cn(
                "group da-focus da-transition relative grid size-12 place-items-center rounded-full",
                on ? "bg-da-primary text-da-primary-fg" : "text-da-muted-fg hover:bg-da-surface hover:text-da-fg",
              )}
            >
              <it.icon aria-hidden className="size-5" />
              <span className="sr-only">{it.label}</span>
              <span
                aria-hidden
                className="pointer-events-none absolute left-full ml-3 hidden rounded-da-pill bg-da-fg px-3 py-1.5 text-sm whitespace-nowrap text-da-bg opacity-0 transition-[opacity,translate] duration-(--da-duration) group-hover:translate-x-0 group-hover:opacity-100 group-focus-visible:opacity-100 md:block md:-translate-x-1"
              >
                {it.label}
              </span>
              {on && <span aria-hidden className="absolute -right-1 bottom-0 size-3 rounded-[60%_0] bg-da-secondary-fg max-md:hidden" />}
            </a>
          );
        })}
        <a
          href="#settings"
          aria-label="Settings"
          className="da-focus grid size-12 place-items-center rounded-full text-da-muted-fg hover:bg-da-surface hover:text-da-fg md:mt-auto"
        >
          <Settings aria-hidden className="size-5" />
        </a>
      </nav>
      <main className="min-w-0 flex-1 pb-20 md:pb-0">{children}</main>
    </div>
  );
}

export default SidebarRail;