// src/components/keywords/overview/bar-list.tsx
/** A list of labelled horizontal bars, scaled to the largest value. */
export function BarList({
  items,
  emptyLabel = "Aucune donnée",
}: {
  items: { label: string; value: number; hint?: string }[];
  emptyLabel?: string;
}) {
  const max = Math.max(1, ...items.map((i) => i.value));
  if (items.length === 0)
    return <p className="text-muted-foreground text-sm">{emptyLabel}</p>;
  return (
    <div className="space-y-2">
      {items.map((i) => (
        <div key={i.label} className="space-y-1">
          <div className="flex items-baseline justify-between text-sm">
            <span className="truncate">{i.label}</span>
            <span className="text-muted-foreground tabular-nums">
              {i.hint ?? i.value.toLocaleString("fr-FR")}
            </span>
          </div>
          <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
            <div
              className="h-full rounded-full bg-primary"
              style={{ width: `${(i.value / max) * 100}%` }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}