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

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

/** 公文页面包屑 */
export default function SiteDocBreadcrumb({ items }: { items: Crumb[] }) {
  return (
    <nav className="meta mb-5 flex items-center gap-1.5 flex-wrap text-[13px]" aria-label="面包屑">
      {items.map((item, i) => {
        const last = i === items.length - 1;
        return (
          <span key={`${item.label}-${i}`} className="inline-flex items-center gap-1.5 min-w-0">
            {i > 0 ? <ChevronRight size={13} className="shrink-0" /> : null}
            {item.href && !last ? (
              <Link href={item.href} className="hover:text-[var(--accent)] transition-colors shrink-0">
                {item.label}
              </Link>
            ) : (
              <span
                className={last ? "truncate" : "shrink-0"}
                style={last ? { color: "var(--accent)" } : undefined}
              >
                {item.label}
              </span>
            )}
          </span>
        );
      })}
    </nav>
  );
}