Breadcrumb

import * as React from "react";
import { ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface Crumb {
  label: React.ReactNode;
  href?: string;
  icon?: React.ReactNode;
}

export interface BreadcrumbProps {
  items: Crumb[];
  /** Collapse middle items into "…" beyond this many. */
  maxItems?: number;
  /** Render links with your router, e.g. Next.js Link. */
  linkAs?: React.ElementType;
  className?: string;
}

export function Breadcrumb({ items, maxItems = 5, linkAs: LinkTag = "a", className }: BreadcrumbProps) {
  const collapsed = items.length > maxItems ? [items[0], { label: "…" }, ...items.slice(-(maxItems - 2))] : items;
  return (
    <nav aria-label="Breadcrumb" className={className}>
      <ol className="flex flex-wrap items-center gap-1.5 text-sm text-muted-foreground">
        {collapsed.map((item, i) => {
          const last = i === collapsed.length - 1;
          return (
            <li key={i} className="flex items-center gap-1.5">
              {item.href && !last ? (
                <LinkTag href={item.href} className="flex items-center gap-1.5 rounded transition-colors hover:text-foreground [&_svg]:size-3.5">
                  {item.icon}
                  {item.label}
                </LinkTag>
              ) : (
                <span aria-current={last ? "page" : undefined} className={cn("flex items-center gap-1.5 [&_svg]:size-3.5", last && "font-medium text-foreground")}>
                  {item.icon}
                  {item.label}
                </span>
              )}
              {!last && <ChevronRight className="size-3.5 opacity-60" aria-hidden />}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}