import HoverPrefetchLink from "./HoverPrefetchLink";

/**
 * Trilha de navegação sobre fundo escuro, no topo das páginas internas. O último item é a página atual.
 * Os links só pré-carregam a rota quando a pessoa chega neles (HoverPrefetchLink).
 * A barra vem depois de cada item, menos do último: quando a trilha não cabe numa linha (celular), a quebra cai
 * depois da barra e a linha de baixo começa pelo nome, nunca por "/".
 */
export function Breadcrumb({
  items,
}: {
  items: readonly { label: string; href: string }[];
}) {
  return (
    <nav aria-label="Trilha de navegação" className="mb-sp-6">
      <ol className="flex flex-wrap items-center gap-x-sp-2 gap-y-sp-1 text-[15px]">
        {items.map(({ label, href }, index) => (
          <li key={href} className="flex items-center gap-sp-2">
            <HoverPrefetchLink
              aria-current={index === items.length - 1 ? "page" : undefined}
              className="ds-link ds-link-text"
              href={href}
            >
              {label}
            </HoverPrefetchLink>
            {index < items.length - 1 ? (
              <span aria-hidden="true">/</span>
            ) : null}
          </li>
        ))}
      </ol>
    </nav>
  );
}