import { ChevronRight } from "lucide-react";
import Link from "next/link";
import { Fragment } from "react";

export type BreadcrumbEintrag = { titel: string; href?: string };

/** Brotkrumen-Navigation; der letzte Eintrag ist die aktuelle Seite (#002). */
export function Breadcrumb({ pfad }: { pfad: BreadcrumbEintrag[] }) {
  return (
    <nav aria-label="Brotkrumen" className="text-muted text-[13.5px]">
      <ol className="flex flex-wrap items-center gap-x-1 gap-y-1">
        {pfad.map((e, i) => {
          const letzter = i === pfad.length - 1;
          return (
            <Fragment key={i}>
              <li className="min-w-0">
                {e.href && !letzter ? (
                  <Link href={e.href} className="hover:text-text rounded transition-colors">
                    {e.titel}
                  </Link>
                ) : (
                  <span aria-current={letzter ? "page" : undefined} className={letzter ? "text-text" : ""}>
                    {e.titel}
                  </span>
                )}
              </li>
              {!letzter && (
                <li aria-hidden className="flex">
                  <ChevronRight className="size-3.5" />
                </li>
              )}
            </Fragment>
          );
        })}
      </ol>
    </nav>
  );
}