// src/components/keywords/overview/position-distribution.tsx
import type { KeywordOverview } from "@/lib/keywords/overview";

const META: Record<string, { label: string; className: string }> = {
  top3: { label: "Top 3", className: "bg-emerald-500" },
  top10: { label: "4–10", className: "bg-emerald-400" },
  quickwin: { label: "11–20 ⚡", className: "bg-amber-400" },
  deep: { label: "21–50", className: "bg-orange-400" },
  far: { label: "51+", className: "bg-rose-400" },
  none: { label: "Non positionné", className: "bg-muted-foreground/30" },
};

export function PositionDistribution({
  dist,
}: {
  dist: KeywordOverview["positionDistribution"];
}) {
  const total = Math.max(
    1,
    dist.reduce((s, b) => s + b.count, 0),
  );
  return (
    <div className="space-y-2">
      <div className="flex h-3 w-full overflow-hidden rounded-full">
        {dist.map((b) =>
          b.count > 0 ? (
            <div
              key={b.key}
              className={META[b.key].className}
              style={{ width: `${(b.count / total) * 100}%` }}
              title={`${META[b.key].label}: ${b.count}`}
            />
          ) : null,
        )}
      </div>
      <div className="flex flex-wrap gap-x-4 gap-y-1 text-muted-foreground text-xs">
        {dist.map((b) => (
          <span key={b.key} className="inline-flex items-center gap-1">
            <span className={`size-2 rounded-full ${META[b.key].className}`} />
            {META[b.key].label}
            <span className="tabular-nums text-foreground">{b.count}</span>
          </span>
        ))}
      </div>
    </div>
  );
}