Sidebar Icons

import type { ReactNode } from "react";
import { BarChart2, FileText, Folder, Image as ImageIcon, Settings, Type, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

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

const DEFAULT_ITEMS = [
  { label: "Projects", href: "#projects", icon: Folder },
  { label: "Pages", href: "#pages", icon: FileText },
  { label: "Media", href: "#media", icon: ImageIcon },
  { label: "Typography", href: "#type", icon: Type },
  { label: "Analytics", href: "#analytics", icon: BarChart2 },
];

function FrameMark({ className }: { className?: string }) {
  return (
    <svg aria-hidden viewBox="0 0 24 24" className={cn("size-6 shrink-0", className)}>
      <rect x="1" y="1" width="22" height="22" fill="none" stroke="currentColor" strokeWidth="2" />
      <path d="M7 1v22M1 7h22" stroke="currentColor" strokeWidth="2" />
      <rect x="15" y="15" width="4" height="4" fill="var(--da-accent)" />
    </svg>
  );
}

/** Narrow icon rail (56px) of square hairline cells; the active cell is filled ink; labels appear as mono tooltips to the right on hover/focus; turns into a bottom bar on mobile. */
export function SidebarIcons({ items = DEFAULT_ITEMS, activeHref = "#projects", children, className }: SidebarIconsProps) {
  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 justify-around border-t border-da-border bg-da-bg md:sticky md:top-0 md:h-dvh md:w-14 md:flex-col md:justify-start md:border-t-0 md:border-r"
      >
        <span className="hidden h-14 place-items-center border-b border-da-border md:grid">
          <FrameMark className="size-5" />
        </span>
        {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 relative grid size-14 place-items-center md:border-b md:border-da-border",
                on ? "bg-da-fg text-da-bg" : "text-da-muted-fg hover:bg-da-surface-2 hover:text-da-fg",
              )}
            >
              <it.icon aria-hidden className="size-[18px]" strokeWidth={1.5} />
              <span className="sr-only">{it.label}</span>
              <span
                aria-hidden
                className="pointer-events-none absolute left-full z-10 ml-2 hidden bg-da-fg px-2 py-1 font-da-mono text-[10px] tracking-da-label whitespace-nowrap text-da-bg uppercase opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 md:block"
              >
                {it.label}
              </span>
            </a>
          );
        })}
        <a
          href="#settings"
          aria-label="Settings"
          className="da-focus grid size-14 place-items-center text-da-muted-fg hover:text-da-fg md:mt-auto md:border-t md:border-da-border"
        >
          <Settings aria-hidden className="size-[18px]" strokeWidth={1.5} />
        </a>
      </nav>
      <main className="min-w-0 flex-1 pb-16 md:pb-0">{children}</main>
    </div>
  );
}

export default SidebarIcons;