import type { VerwendungsZustand as Zustand } from "@/generated/prisma/enums";
import { clsx } from "clsx";

/** Zustand einer Verwendung – immer Punkt und Text, nie nur Farbe (#016). */
const ANZEIGE: Record<Zustand, { text: string; klasse: string; punkt: string }> = {
  GEPLANT: { text: "noch nicht ausgerollt", klasse: "text-accent", punkt: "○" },
  AUSGEROLLT: { text: "synchron", klasse: "text-ok", punkt: "●" },
  ABWEICHUNG: { text: "Drift", klasse: "text-danger", punkt: "●" },
  ENTFERNEN: { text: "wird entfernt", klasse: "text-accent", punkt: "○" },
  ENTFERNT: { text: "entfernt", klasse: "text-muted", punkt: "○" },
  FEHLGESCHLAGEN: { text: "fehlgeschlagen", klasse: "text-danger", punkt: "●" },
};

export function VerwendungsZustand({ zustand, className }: { zustand: Zustand; className?: string }) {
  const anzeige = ANZEIGE[zustand];
  return (
    <span
      className={clsx(
        "inline-flex items-center gap-1.5 text-[13px] whitespace-nowrap",
        anzeige.klasse,
        className,
      )}
    >
      <span aria-hidden>{anzeige.punkt}</span>
      {anzeige.text}
    </span>
  );
}