import { Link, useLocation } from "react-router-dom";
import { ChevronRight } from "lucide-react";
import { NAV_SECTIONS } from "./nav";

export function DocBreadcrumbs() {
  const { pathname } = useLocation();

  const section = NAV_SECTIONS.find((s) => s.items.some((i) => i.path === pathname));
  const item = section?.items.find((i) => i.path === pathname);

  if (!section || !item) return null;

  return (
    <nav className="flex items-center gap-1.5 text-sm text-muted-foreground mb-6">
      <Link to="/docs" className="hover:text-foreground transition-colors">
        Docs
      </Link>
      <ChevronRight className="h-3.5 w-3.5" />
      <span>{section.title}</span>
      {item.path !== "/docs" && (
        <>
          <ChevronRight className="h-3.5 w-3.5" />
          <span className="text-foreground">{item.title}</span>
        </>
      )}
    </nav>
  );
}
