import { SITE_URL } from '@/lib/site';

/** schema.org BreadcrumbList JSON-LD for the pages D3 owns (server component; absolute URLs). */
export function BreadcrumbLd({ items }: { items: { name: string; href: string }[] }) {
  const ld = {
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: items.map((it, i) => ({ '@type': 'ListItem', position: i + 1, name: it.name, item: `${SITE_URL}${it.href}` })),
  };
  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(ld) }} />;
}

/** Visible breadcrumb trail matching the JSON-LD (last item is the current page). */
export function Breadcrumbs({ items }: { items: { name: string; href: string }[] }) {
  return (
    <nav aria-label="Breadcrumb" className="pt-5 text-xs text-ink-3">
      <ol className="flex flex-wrap items-center gap-1.5">
        {items.map((it, i) => (
          <li key={it.href} className="flex items-center gap-1.5">
            {i > 0 && <span aria-hidden>/</span>}
            {i === items.length - 1 ? (
              <span className="text-ink-2" aria-current="page">
                {it.name}
              </span>
            ) : (
              <a href={it.href} className="hover:text-ink">
                {it.name}
              </a>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}