import { breadcrumbListJsonLd, JsonLdScript } from '#web-runtime/lib/structured-data';
import type { Breadcrumb } from '#web-runtime/types';
import { toPublicHref } from '#i18n/content-href';

export default function Breadcrumbs({ items }: { items: Breadcrumb[] }) {
  if (items.length <= 1) {
    return null;
  }

  return (
    <nav aria-label="Breadcrumb" className="border-b border-[#d6d7cf]">
      <ol className="mx-auto flex w-[min(calc(100%-2rem),76rem)] flex-wrap items-center gap-x-2 gap-y-1 py-3.5 font-mono text-xs font-medium tracking-[0.02em] text-[#5d675f] max-[45rem]:w-[min(calc(100%-1.25rem),76rem)]">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;

          return (
            <li key={`${item.href}-${index}`} className="flex items-center gap-2">
              {index > 0 ? (
                <span aria-hidden="true" className="text-[#aab4aa]">
                  /
                </span>
              ) : null}
              {isLast ? (
                <span aria-current="page" className="text-[#172019]">
                  {item.label}
                </span>
              ) : (
                <a
                  href={toPublicHref(item.href)}
                  className="rounded-sm underline-offset-4 transition-colors hover:text-[#172019] hover:underline focus-visible:outline-3 focus-visible:outline-offset-4 focus-visible:outline-[#99d900]"
                >
                  {item.label}
                </a>
              )}
            </li>
          );
        })}
      </ol>
      <JsonLdScript data={breadcrumbListJsonLd(items)} />
    </nav>
  );
}