import Link from "next/link";

/** Trilha de navegação sobre fundo escuro, no topo das páginas internas. O último item é a página atual. */
export function Breadcrumb({
  items,
}: {
  items: readonly { label: string; href: string }[];
}) {
  return (
    <nav aria-label="Breadcrumb" className="mb-sp-6">
      <ol className="flex flex-wrap items-center gap-sp-2 text-sm">
        {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}
            <Link
              aria-current={index === items.length - 1 ? "page" : undefined}
              className="ds-link ds-link-text"
              href={href}
            >
              {label}
            </Link>
          </li>
        ))}
      </ol>
    </nav>
  );
}