import Link from "next/link";

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

/** Simple slash-separated breadcrumb trail. The last item is the current page. */
export function Breadcrumb({ items }: { items: BreadcrumbItem[] }) {
  return (
    <nav aria-label="Breadcrumb">
      <ol className="flex flex-wrap items-center gap-1.5 text-xs">
        {items.map((item, i) => {
          const isLast = i === items.length - 1;
          return (
            <li key={i} className="flex items-center gap-1.5">
              {item.href && !isLast ? (
                <Link
                  href={item.href}
                  className="text-indigo-200 transition-colors hover:text-white"
                >
                  {item.label}
                </Link>
              ) : (
                <span className={isLast ? "font-medium text-white" : "text-indigo-200"}>
                  {item.label}
                </span>
              )}
              {!isLast && <span className="text-indigo-300/70">/</span>}
            </li>
          );
        })}
      </ol>
    </nav>
  );
}