import { Badge } from "@/components/ui/badge";
import type { EstadoOrden } from "@/lib/api";

/**
 * El color dice en qué punto del camino está la orden, de un vistazo:
 * gris lo que todavía no se movió, ámbar lo que está en proceso, verde lo terminado,
 * rojo lo anulado.
 */
const ESTILOS: Record<EstadoOrden, string> = {
  BORRADOR: "bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300",
  PLANIFICADA: "bg-blue-100 text-blue-800 dark:bg-blue-950 dark:text-blue-300",
  MP_DESPACHADA: "bg-amber-100 text-amber-900 dark:bg-amber-950 dark:text-amber-300",
  EN_EJECUCION: "bg-orange-100 text-orange-900 dark:bg-orange-950 dark:text-orange-300",
  PRODUCIDA: "bg-violet-100 text-violet-900 dark:bg-violet-950 dark:text-violet-300",
  TERMINADA: "bg-emerald-100 text-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
  ANULADA: "bg-red-100 text-red-800 dark:bg-red-950 dark:text-red-300",
};

export function EstadoBadge({
  estado,
  etiqueta,
}: {
  estado: EstadoOrden;
  etiqueta: string;
}) {
  return (
    <Badge variant="secondary" className={ESTILOS[estado]}>
      {etiqueta}
    </Badge>
  );
}