import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { CaretRightIcon, DotsThreeIcon } from "@phosphor-icons/react/dist/ssr";
import { cn } from "@/lib/utils";

export function Breadcrumb(p: React.ComponentProps<"nav">) {
  return <nav aria-label="breadcrumb" {...p} />;
}
export function BreadcrumbList({ className, ...p }: React.ComponentProps<"ol">) {
  return (
    <ol
      className={cn("flex flex-wrap items-center gap-1.5 text-sm font-semibold text-on-surface-muted sm:gap-2", className)}
      {...p}
    />
  );
}
export function BreadcrumbItem({ className, ...p }: React.ComponentProps<"li">) {
  return <li className={cn("inline-flex items-center gap-1.5", className)} {...p} />;
}
export function BreadcrumbLink({ asChild, className, ...p }: React.ComponentProps<"a"> & { asChild?: boolean }) {
  const Comp = asChild ? Slot : "a";
  return (
    <Comp
      className={cn(
        "inline-block rounded-full px-1 transition-[color,translate] duration-200 ease-out hover:-translate-y-0.5 hover:text-on-surface focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/40",
        className
      )}
      {...p}
    />
  );
}
export function BreadcrumbPage({ className, ...p }: React.ComponentProps<"span">) {
  return (
    <span
      role="link"
      aria-disabled="true"
      aria-current="page"
      className={cn("rounded-full bg-surface px-3 py-1 font-bold text-on-surface shadow-clay-sm", className)}
      {...p}
    />
  );
}
export function BreadcrumbSeparator({ children, className, ...p }: React.ComponentProps<"li">) {
  return (
    <li role="presentation" aria-hidden="true" className={cn("opacity-60 [&>svg]:size-3.5", className)} {...p}>
      {children ?? <CaretRightIcon weight="bold" />}
    </li>
  );
}
export function BreadcrumbEllipsis({ className, ...p }: React.ComponentProps<"span">) {
  return (
    <span
      role="presentation"
      aria-hidden="true"
      className={cn("grid size-8 place-items-center rounded-full bg-surface-sunken shadow-well", className)}
      {...p}
    >
      <DotsThreeIcon weight="bold" className="size-4" />
      <span className="sr-only">More</span>
    </span>
  );
}
Installation
