Sidebar Floating

"use client";

import type { ReactNode } from "react";
import { CalendarDays, Home, MessagesSquare, Settings, Sparkles, Video, type LucideIcon } from "lucide-react";
import { cn } from "@/lib/utils";

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

export interface SidebarFloatingProps {
  items?: SidebarFloatingItem[];
  activeHref?: string;
  user?: { name: string; initials: string };
  children?: ReactNode;
  className?: string;
}

const GLASS = "da-stroke bg-da-surface backdrop-blur-da backdrop-saturate-150";

const DEFAULT_ITEMS: SidebarFloatingItem[] = [
  { label: "Home", href: "#home", icon: Home },
  { label: "Meetings", href: "#meetings", icon: Video, badge: 3 },
  { label: "Calendar", href: "#calendar", icon: CalendarDays },
  { label: "Ask Halo", href: "#ask", icon: Sparkles },
  { label: "Messages", href: "#messages", icon: MessagesSquare },
];

/** Floating glass icon rail detached from the viewport edges: gradient active pill, tooltips on hover/focus, badges and avatar at the bottom; becomes a bottom bar on mobile. */
export function SidebarFloating({
  items = DEFAULT_ITEMS,
  activeHref = "#meetings",
  user = { name: "Amara Diallo", initials: "AD" },
  children,
  className,
}: SidebarFloatingProps) {
  const link = (it: SidebarFloatingItem, mobile = false) => {
    const active = it.href === activeHref;
    return (
      <a
        href={it.href}
        aria-current={active ? "page" : undefined}
        className={cn(
          "da-focus da-transition group relative grid size-11 place-items-center rounded-da-md",
          active ? "bg-gradient-to-br from-da-primary to-da-accent text-da-primary-fg shadow-da-md" : "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>
        {it.badge !== undefined && (
          <span
            aria-hidden
            className="absolute -top-1 -right-1 grid size-5 place-items-center rounded-full bg-da-danger text-[10px] font-semibold text-da-danger-fg ring-2 ring-da-bg"
          >
            {it.badge}
          </span>
        )}
        {!mobile && (
          <span
            aria-hidden
            className={cn(
              "pointer-events-none absolute left-full z-20 ml-4 rounded-da-pill px-3 py-1.5 text-sm font-medium whitespace-nowrap text-da-fg opacity-0 shadow-da-md transition-[opacity,translate] duration-(--da-duration) group-hover:translate-x-1 group-hover:opacity-100 group-focus-visible:translate-x-1 group-focus-visible:opacity-100",
              GLASS,
            )}
          >
            {it.label}
          </span>
        )}
      </a>
    );
  };

  return (
    <div className={cn("min-h-dvh text-da-fg", className)}>
      <aside className={cn("fixed top-4 bottom-4 left-4 z-30 hidden w-[68px] flex-col items-center rounded-da-lg py-4 shadow-da-lg md:flex", GLASS)}>
        <span aria-hidden className="grid size-10 place-items-center rounded-full bg-gradient-to-br from-da-primary to-da-accent">
          <span className="size-3.5 rounded-full bg-da-bg/90" />
        </span>
        <nav aria-label="Main" className="mt-6 flex flex-1 flex-col gap-2">
          {items.map((it) => (
            <span key={it.href}>{link(it)}</span>
          ))}
        </nav>
        {link({ label: "Settings", href: "#settings", icon: Settings })}
        <span
          role="img"
          aria-label={user.name}
          className="mt-3 grid size-10 place-items-center rounded-full bg-gradient-to-br from-da-accent to-da-success text-xs font-semibold text-da-primary-fg ring-2 ring-da-bg"
        >
          {user.initials}
        </span>
      </aside>
      <nav aria-label="Main" className={cn("fixed inset-x-4 bottom-4 z-30 flex justify-around rounded-da-pill p-2 shadow-da-lg md:hidden", GLASS)}>
        {items.map((it) => (
          <span key={it.href}>{link(it, true)}</span>
        ))}
      </nav>
      <main className="pb-28 md:pb-0 md:pl-[100px]">{children}</main>
    </div>
  );
}

export default SidebarFloating;