import { Progress } from "@/components/ui/progress";
import type { MetricValue } from "@/components/keywords/metric-cell";

// Barre de difficulté — **seule la longueur porte l'information**.
//
// Pas de code couleur par palier, et ce n'est pas un choix esthétique : la décision A5 le dit
// (« les échelles diffèrent par fournisseur »), un « 40 = vert » calibré sur Semrush mentirait
// sur du Mangools. Une longueur ne prétend rien de tel — elle compare une valeur à sa propre
// échelle 0-100, et deux barres côte à côte se comparent à l'œil sans qu'aucun seuil soit
// affirmé. La teinte reste l'accent de marque, la même partout.

export function KdBar({ value }: { value: MetricValue }) {
  // `ratio` est calculé côté serveur (KD sur 100, borné) ; son absence vaut une barre vide
  // plutôt qu'une barre fausse.
  const percent = Math.round(Math.min(1, Math.max(0, value.ratio ?? 0)) * 100);
  return (
    <div className="flex min-w-0 items-center gap-2">
      <span className="num text-sm">{value.text}</span>
      <Progress value={percent} aria-hidden="true" className="w-10 shrink-0 gap-0" />
    </div>
  );
}