import { Badge } from "@/components/ui/badge";
import { intentLabel } from "@/lib/keywords";
import { cn } from "@/lib/utils";

// Badge d'intention — **un seul endroit** où une intention prend une couleur, pour tout le
// produit. Un écran qui a besoin de cette pastille importe ce composant ; il ne recopie
// jamais la table ci-dessous.
//
// Les jetons de catégorie sont nommés par teinte (`category-violet`, `category-blue`) : la
// correspondance intention ↔ couleur est une décision de cette feature, et elle vit ici.
// Le teal de marque va au **transactionnel** — c'est l'intention qui vaut de l'argent, elle
// mérite l'accent. Le voile de marque (`brand-surface`) et l'encre lisible (`brand-text`)
// plutôt que l'aplat plein, qui ferait un pavé au milieu d'une table dense.
//
// La navigationnelle n'a pas de teinte : il n'existe pas de troisième jeton de catégorie, et
// en inventer un ici serait exactement ce que la règle interdit. Elle reste neutre — signalé
// dans le rapport de la feature.
const INTENT_TONES: Record<string, string> = {
  transactional: "bg-brand-surface text-brand-text border-transparent",
  commercial: "bg-category-violet-surface text-category-violet border-transparent",
  informational: "bg-category-blue-surface text-category-blue border-transparent",
};

/**
 * Une même source peut porter plusieurs intentions dans une seule colonne
 * (`"informational,commercial"`, forme produite par `to_intent` côté api). Le libellé les
 * rend toutes ; la teinte suit la **première**, qui est celle que l'api écrit en tête.
 */
export function IntentBadge({ value, className }: { value: string; className?: string }) {
  const first = value.split(",")[0]?.trim() ?? "";
  return (
    <Badge variant="outline" className={cn("font-normal", INTENT_TONES[first], className)}>
      {intentLabel(value)}
    </Badge>
  );
}