import Link from 'next/link';

interface Crumb {
  name: string;
  /** Site-relative path, e.g. "/category/shoes". Omit on the current (last) crumb. */
  href?: string;
}

/**
 * Visible breadcrumb trail. Renders the exact same path structured data
 * already declares (see category-json-ld.tsx / product-json-ld.tsx) as real
 * `<Link>`s — search engines weight on-page navigation links much more than
 * sitemap-only or script-only (JSON-LD) mentions of a URL.
 */
export function Breadcrumbs({ items }: { items: Crumb[] }) {
  if (items.length < 2) return null;
  return (
    <nav aria-label="Breadcrumb" className="text-muted-foreground mb-4 text-sm">
      <ol className="flex flex-wrap items-center gap-1.5">
        {items.map((item, idx) => (
          <li key={`${item.name}-${idx}`} className="flex items-center gap-1.5">
            {idx > 0 && <span aria-hidden="true">/</span>}
            {item.href ? (
              <Link href={item.href} className="hover:text-foreground transition-colors">
                {item.name}
              </Link>
            ) : (
              <span aria-current="page" className="text-foreground">
                {item.name}
              </span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}