import { ChevronRight, LayoutGrid } from "lucide-react";

/**
 * Breadcrumb genérico do drill-down do Search Console (mesmo padrão do
 * DrilldownBreadcrumb do Google Ads): [rootLabel] > [entityLabel].
 */
export default function DrillBreadcrumb({ rootLabel, entityLabel, onRoot }) {
    return (
        <nav className="flex items-center gap-1 text-sm flex-wrap min-w-0">
            <LayoutGrid className="h-3.5 w-3.5 text-muted-foreground shrink-0 mr-0.5" />
            <button
                onClick={onRoot}
                className="text-muted-foreground hover:text-foreground transition-colors truncate max-w-[240px]"
            >
                {rootLabel}
            </button>
            <ChevronRight className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
            <span className="font-medium truncate max-w-[360px]" title={entityLabel}>
                {entityLabel}
            </span>
        </nav>
    );
}