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).
 */
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-sp-2 text-[15px]">
        {items.map(({ label, href }, index) => (
          <li
            key={href}
            className={index > 0 ? "flex items-center gap-sp-2" : undefined}
          >
            {index > 0 ? <span aria-hidden="true">/</span> : null}
            <HoverPrefetchLink
              aria-current={index === items.length - 1 ? "page" : undefined}
              className="ds-link ds-link-text"
              href={href}
            >
              {label}
            </HoverPrefetchLink>
          </li>
        ))}
      </ol>
    </nav>
  );
}