import { ChevronRight } from 'lucide-react';
import { useLocation } from 'react-router-dom';
import { findTrail } from './nav-utils';

/** 内容区顶部面包屑:L1 / L2 / L3,末项高亮(docs/01 §2.3)。 */
export function Breadcrumb() {
  const { pathname } = useLocation();
  const trail = findTrail(pathname);
  if (!trail.length) return null;

  return (
    <nav
      aria-label="breadcrumb"
      className="flex items-center gap-1 text-xs text-muted-foreground"
    >
      {trail.map((n, i) => {
        const last = i === trail.length - 1;
        return (
          <span key={n.key} className="flex items-center gap-1">
            {i > 0 && <ChevronRight className="size-3 opacity-60" />}
            <span className={last ? 'text-foreground font-medium' : ''}>
              {n.label}
            </span>
          </span>
        );
      })}
    </nav>
  );
}

export default Breadcrumb;