import Link from "next/link";
import { ChevronRight } from "lucide-react";
export function Breadcrumbs({ items }: { items: { href?: string; label: string }[] }) {
  return (
    <nav aria-label="Breadcrumb" className="text-sm text-fg-3">
      <ol className="flex flex-wrap items-center gap-1">
        <li><Link href="/" className="hover:text-fg">Home</Link></li>
        {items.map((it, i) => (
          <li key={i} className="flex items-center gap-1"><ChevronRight className="h-3.5 w-3.5" aria-hidden />{it.href ? <Link href={it.href} className="hover:text-fg">{it.label}</Link> : <span className="text-fg-2" aria-current="page">{it.label}</span>}</li>
        ))}
      </ol>
    </nav>
  );
}