import Link from "next/link";

export type Crumb = { title: string; href?: string };

export function Breadcrumbs({ items }: { items: Crumb[] }) {
  return (
    <nav aria-label="Breadcrumb" className="mb-6">
      <ol className="flex flex-wrap items-center gap-2 text-sm text-anouma-plum/80">
        <li>
          <Link href="/" className="hover:text-anouma-mauve-dark">
            Startseite
          </Link>
        </li>
        {items.map((item, i) => (
          <li key={item.title} className="flex items-center gap-2">
            <span aria-hidden="true" className="text-anouma-taupe">
              /
            </span>
            {item.href && i !== items.length - 1 ? (
              <Link href={item.href} className="hover:text-anouma-mauve-dark">
                {item.title}
              </Link>
            ) : (
              <span aria-current="page" className="text-anouma-plum">
                {item.title}
              </span>
            )}
          </li>
        ))}
      </ol>
    </nav>
  );
}