import { ChevronRight } from "lucide-react";
import Link from "next/link";
import { cn } from "@/components/ui/cn";
import { routes } from "@/lib/routes";
import { breadcrumbJsonLd } from "@/lib/seo";
import { JsonLd } from "./json-ld";

export interface Crumb {
  name: string;
  href: string;
}

/**
 * Breadcrumb trail (Home is implicit). Last item is the current page (not a link). Emits BreadcrumbList JSON-LD.
 * On mobile the trail scrolls horizontally instead of wrapping so the title stays first in view.
 */
export function Breadcrumbs({ items, className }: { items: Crumb[]; className?: string }) {
  const all: Crumb[] = [{ name: "Home", href: routes.home() }, ...items];
  return (
    <>
      <nav aria-label="Breadcrumb" className={cn("-mx-3 overflow-x-auto px-3 no-scrollbar sm:mx-0 sm:px-0", className)}>
        <ol className="flex min-w-max items-center gap-1 text-[12px] text-ink-3">
          {all.map((c, i) => {
            const last = i === all.length - 1;
            return (
              <li key={c.href} className="inline-flex items-center gap-1">
                {i > 0 && <ChevronRight className="size-3 text-ink-4" aria-hidden />}
                {last ? (
                  <span aria-current="page" className="max-w-[60vw] truncate text-ink-2 sm:max-w-[360px] lg:max-w-[560px]">
                    {c.name}
                  </span>
                ) : (
                  <Link href={c.href} className="hover:text-ink hover:underline">
                    {c.name}
                  </Link>
                )}
              </li>
            );
          })}
        </ol>
      </nav>
      <JsonLd data={breadcrumbJsonLd(all)} />
    </>
  );
}