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-2 flex items-center gap-1 flex-wrap text-[12.5px] leading-none lg:absolute lg:bottom-full lg:left-0 lg:right-0 lg:mb-0 lg:pb-2 lg:pl-1"
      aria-label="面包屑"
    >
      {items.map((item, i) => {
        const last = i === items.length - 1;
        const cls = last ? "truncate" : "shrink-0";
        return (
          <span key={`${item.label}-${i}`} className="inline-flex items-center gap-1 min-w-0">
            {i > 0 ? <ChevronRight size={12} className="shrink-0 opacity-70" aria-hidden /> : null}
            {item.href ? (
              <Link
                href={item.href}
                className={`hover:text-[var(--accent)] transition-colors ${cls}`}
                style={last ? { color: "var(--accent)" } : undefined}
              >
                {item.label}
              </Link>
            ) : (
              <span className={cls} style={last ? { color: "var(--accent)" } : undefined}>
                {item.label}
              </span>
            )}
          </span>
        );
      })}
    </nav>
  );
}