import { Link } from "@tanstack/react-router";
import { ChevronRight } from "lucide-react";

export type Crumb = { label: string; to?: string };

export function Breadcrumbs({ items }: { items: Crumb[] }) {
  return (
    <nav aria-label="Breadcrumb" className="border-b border-border/70 bg-secondary/50">
      <div className="container-page">
        <ol className="flex flex-wrap items-center gap-1 py-3 text-sm text-muted-foreground">
          <li className="flex items-center gap-1">
            <Link to="/" className="rounded hover:text-primary hover:underline">
              Home
            </Link>
            <ChevronRight aria-hidden="true" className="size-3.5 opacity-60" />
          </li>
          {items.map((item, i) => {
            const last = i === items.length - 1;
            return (
              <li key={item.label} className="flex items-center gap-1">
                {item.to && !last ? (
                  <Link to={item.to} className="rounded hover:text-primary hover:underline">
                    {item.label}
                  </Link>
                ) : (
                  <span aria-current={last ? "page" : undefined} className="font-medium text-foreground">
                    {item.label}
                  </span>
                )}
                {!last && <ChevronRight aria-hidden="true" className="size-3.5 opacity-60" />}
              </li>
            );
          })}
        </ol>
      </div>
    </nav>
  );
}