Estado.

<span class="ui-sample badge badge--ok" data-status="operativo"><span aria-hidden="true">●</span> Operativo</span>

<span class="ui-sample badge badge--ok border border-slate-300 bg-white p-4 text-slate-950" data-status="operativo"><span aria-hidden="true">●</span> Operativo</span>

/** Estados con icono y tono propios. Se acepta cualquier otro valor de `status`: sin `icon`, se muestra sin símbolo. */
export type StatusBadgeStatus = "operativo" | "degradado" | "interrumpido";

/** Tono de la insignia: `ok` operativo, `warn` degradado o en revisión, `err` interrumpido o con falla, `neutral` sin tono. */
export type StatusBadgeTone = "ok" | "warn" | "err" | "neutral";

export interface StatusBadgeProps {
  /** Estado del servicio o proceso; va en `data-status`. */
  status?: StatusBadgeStatus | (string & {});
  /** Texto visible; por defecto, el estado con mayúscula inicial. */
  label?: string;
  /** Símbolo decorativo antes del texto (● operativo, △ degradado, ✕ interrumpido); con texto vacío no se dibuja. */
  icon?: string;
  /** Tono de la insignia; sin valor se deduce de `status` (operativo: `ok`; degradado, parcial, pendiente: `warn`; interrumpido, caído, falló: `err`) y si no lo reconoce es `neutral`. */
  tone?: StatusBadgeTone;
  className?: string;
}

const ICONOS: Partial<Record<string, string>> = { operativo: "●", degradado: "△", interrumpido: "✕" };

const STATUS_BADGE_TONOS: Partial<Record<string, StatusBadgeTone>> = {
  operativo: "ok",
  activo: "ok",
  degradado: "warn",
  parcial: "warn",
  pendiente: "warn",
  "en revisión": "warn",
  mantenimiento: "warn",
  interrumpido: "err",
  "caído": "err",
  "falló": "err",
  fallido: "err",
};

const STATUS_BADGE_CLASES: Record<StatusBadgeTone, string> = {
  ok: "badge badge--ok",
  warn: "badge badge--warn",
  err: "badge badge--err",
  neutral: "badge",
};

/**
 * Insignia de estado de un servicio, proceso o fuente de datos (operativo, degradado, interrumpido) para tableros y listados.
 *
 * El estado se lee en el texto; el tono (`badge--ok`, `badge--warn`, `badge--err`) y el símbolo, que cambia de forma según el estado, lo refuerzan. El símbolo va con `aria-hidden`.
 *
 * @example <StatusBadge status="degradado" />
 * @example <StatusBadge status="interrumpido" label="Interrumpido desde 18:24" />
 */
export function StatusBadge({ status = "operativo", label, icon, tone, className }: StatusBadgeProps) {
  const texto = label ?? status.charAt(0).toUpperCase() + status.slice(1);
  const simbolo = icon ?? ICONOS[status];
  const tono = tone ?? STATUS_BADGE_TONOS[status.toLowerCase()] ?? "neutral";
  return (
    <span className={[STATUS_BADGE_CLASES[tono], className].filter(Boolean).join(" ")} data-status={status}>
      {simbolo ? <><span aria-hidden="true">{simbolo}</span>{texto ? " " : null}</> : null}
      {texto}
    </span>
  );
}