Estado documental.

<section class="ui-sample ui-document" data-document-status="true"><header><strong>Estado documental</strong><span class="badge badge--warn">En revisión</span></header><dl><div><dt>Versión</dt><dd>4</dd></div><div><dt>Autoridad</dt><dd>Firmas y Documentos</dd></div><div><dt>Siguiente acción</dt><dd>Aprobación legal</dd></div></dl></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-document-status="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Estado documental</strong><span class="badge badge--warn">En revisión</span></header><dl class="grid gap-2"><div><dt>Versión</dt><dd>4</dd></div><div><dt>Autoridad</dt><dd>Firmas y Documentos</dd></div><div><dt>Siguiente acción</dt><dd>Aprobación legal</dd></div></dl></section>

export interface DocumentStatusItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  value: string;
}

export interface DocumentStatusProps {
  title?: string;
  /** Estado del documento en su flujo («En revisión», «Requiere cambios»); se muestra como etiqueta y vacío lo oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (borrador: neutro; en revisión o pendiente: `warn`; aprobado, firmado o vigente: `ok`; requiere cambios, rechazado, anulado o vencido: `err`; otro: `neutral`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Datos del estado: versión, autoridad a cargo y siguiente acción. */
  items?: DocumentStatusItem[];
  className?: string;
}

const DOCUMENT_STATUS_TONOS: [string, "ok" | "warn" | "err" | "neutral"][] = [
  ["borrador", "neutral"],
  ["en revisión", "warn"],
  ["pendiente", "warn"],
  ["aprobado", "ok"],
  ["firmado", "ok"],
  ["vigente", "ok"],
  ["requiere cambios", "err"],
  ["rechazado", "err"],
  ["anulado", "err"],
  ["vencido", "err"],
];

function claseEstado(status: string, tone?: "ok" | "warn" | "err" | "neutral") {
  const texto = status.toLowerCase();
  const tono = tone ?? DOCUMENT_STATUS_TONOS.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

const DOCUMENT_STATUS_ITEMS: DocumentStatusItem[] = [
  { label: "Versión", value: "4" },
  { label: "Autoridad", value: "Firmas y Documentos" },
  { label: "Siguiente acción", value: "Aprobación legal" },
];

/**
 * Estado de un documento en su flujo de revisión y firma, con la versión vigente, la autoridad a cargo y la siguiente acción; se usa en la ficha del documento.
 *
 * El estado va en texto dentro de una etiqueta con tono (`badge`), no sólo en color, con el mismo criterio que `DocumentHeader`.
 *
 * @example <DocumentStatus status="Requiere cambios" items={[{ label: "Versión", value: "4" }, { label: "Autoridad", value: "Firmas y Documentos" }, { label: "Siguiente acción", value: "Corregir observaciones" }]} />
 */
export function DocumentStatus({
  title = "Estado documental",
  status = "En revisión",
  statusTone,
  items = DOCUMENT_STATUS_ITEMS,
  className,
}: DocumentStatusProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-document-status>
      {title || status ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
        </header>
      ) : null}
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
    </section>
  );
}