import { BadgeCheck, CircleDashed, Clock, TriangleAlert, type LucideIcon } from "lucide-react";
import { Badge } from "@/components/ui/badge";

// Le badge d'état partagé de l'application (règle « composants réutilisables par défaut »).
//
// Trois choses ensemble, jamais une seule : une **icône** qui donne la forme, une **couleur**
// qui donne le ton, et le **mot écrit**. La couleur seule ne dit rien à qui ne la distingue
// pas — c'est la raison de l'icône, pas une décoration.
//
// **Un seul endroit décide de la couleur d'un état** : la table `TONES` ci-dessous, et tous
// les écrans suivent. Elle ne porte que des **tokens de statut** (`--status-*`), jamais une
// couleur en dur : changer la palette ne demandera pas de rouvrir un écran.
//
// Le voile (`-surface`) et jamais l'aplat plein : un badge d'état se lit à côté du texte, il
// ne doit pas peser autant qu'un bouton d'action. `variant="outline"` fournit la géométrie,
// les deux classes fournissent le ton — `badge.tsx` n'a donc pas eu à bouger.

export type StatusTone = "success" | "pending" | "error" | "neutral";

const TONES: Record<StatusTone, { className: string; icon: LucideIcon }> = {
  success: { className: "bg-status-ok-surface text-status-ok", icon: BadgeCheck },
  pending: { className: "bg-status-pending-surface text-status-pending", icon: Clock },
  error: { className: "bg-status-error-surface text-status-error", icon: TriangleAlert },
  neutral: { className: "bg-status-idle-surface text-status-idle", icon: CircleDashed },
};

export function StatusBadge({ tone, children }: { tone: StatusTone; children: React.ReactNode }) {
  const { className, icon: Icon } = TONES[tone];
  return (
    <Badge variant="outline" className={`border-transparent ${className}`}>
      <Icon data-icon="inline-start" />
      {children}
    </Badge>
  );
}