Dock

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import { cn } from "@/lib/utils";

export type DockItem = {
  label: string;
  icon: React.ReactNode;
  /** Renders a link. */
  href?: string;
  /** Renders a button. Ignored when href is set. */
  onClick?: () => void;
  /** Marks the current app with a dot under the icon. */
  active?: boolean;
};

export type DockSeparator = { type: "separator" };

type DockProps = Omit<React.ComponentProps<"nav">, "children"> & {
  /** Icons in order. Put { type: "separator" } between groups. */
  items: (DockItem | DockSeparator)[];
  /** static sits in the flow; fixed floats at the bottom centre of the viewport. */
  position?: "static" | "fixed";
  /** 40px icons by default, 32px for sm. */
  size?: "default" | "sm";
  /** Accessible name of the nav. */
  label?: string;
};

/**
 * A row of icon buttons in a floating pill, each with a tooltip.
 * The hovered icon lifts 2px; the active one carries a dot underneath.
 */
export function Dock({ items, position = "static", size = "default", label = "Dock", className, ...props }: DockProps) {
  return (
    <TooltipProvider>
      <nav
        data-slot="dock"
        data-size={size}
        aria-label={label}
        className={cn(
          "inline-flex items-center gap-1 rounded-full border bg-popover shadow-md",
          size === "sm" ? "p-1" : "p-1.5",
          position === "fixed" && "fixed bottom-4 left-1/2 z-40 -translate-x-1/2",
          className,
        )}
        {...props}
      >
        {items.map((item, i) =>
          "type" in item ? (
            <span
              key={`separator-${i}`}
              role="separator"
              aria-orientation="vertical"
              className={cn("mx-1 w-px shrink-0 bg-border", size === "sm" ? "h-5" : "h-6")}
            />
          ) : (
            <DockButton key={`${item.label}-${i}`} item={item} size={size} />
          ),
        )}
      </nav>
    </TooltipProvider>
  );
}

function DockButton({ item, size }: { item: DockItem; size: "default" | "sm" }) {
  const className = cn(
    "relative rounded-full transition-[background-color,color,transform] duration-150 ease-out hover:bg-muted motion-safe:hover:-translate-y-0.5",
    size === "sm" ? "size-8 [&_svg:not([class*='size-'])]:size-4" : "size-10 [&_svg:not([class*='size-'])]:size-5",
  );
  const content = (
    <>
      {item.icon}
      <span className="sr-only">{item.label}</span>
      {item.active && (
        <span
          aria-hidden="true"
          data-slot="dock-dot"
          className="absolute -bottom-1 left-1/2 size-1 -translate-x-1/2 rounded-full bg-foreground"
        />
      )}
    </>
  );

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        {item.href ? (
          <Button variant="ghost" size="icon" asChild className={className}>
            <a href={item.href} aria-current={item.active ? "page" : undefined}>
              {content}
            </a>
          </Button>
        ) : (
          <Button
            type="button"
            variant="ghost"
            size="icon"
            onClick={item.onClick}
            aria-current={item.active ? "true" : undefined}
            className={className}
          >
            {content}
          </Button>
        )}
      </TooltipTrigger>
      <TooltipContent side="top" sideOffset={8}>
        {item.label}
      </TooltipContent>
    </Tooltip>
  );
}