Exportación.

<section class="ui-sample ui-service" data-export-job="true"><header><strong>Exportación regional</strong><span class="badge badge--ok">Disponible</span></header><dl><div><dt>Formato</dt><dd>CSV UTF-8</dd></div><div><dt>Filas</dt><dd>48.214</dd></div><div><dt>Vence</dt><dd>en 24 h</dd></div></dl><a class="btn btn--primary" href="#descargar">Descargar 8,2 MB</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-export-job="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Exportación regional</strong><span class="badge badge--ok">Disponible</span></header><dl class="grid gap-2"><div><dt>Formato</dt><dd>CSV UTF-8</dd></div><div><dt>Filas</dt><dd>48.214</dd></div><div><dt>Vence</dt><dd>en 24 h</dd></div></dl><a class="btn btn--primary underline underline-offset-4" href="#descargar">Descargar 8,2 MB</a></section>

export interface ExportJobItem {
  /** Nombre del dato (`<dt>`): formato, filas, vencimiento. */
  label: string;
  value: string;
}

export interface ExportJobProps {
  /** Qué se exporta. */
  title?: string;
  /** Estado visible de la exportación («Preparando», «Disponible»); se muestra como etiqueta y vacío la oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (disponible o lista: `ok`; parcial: `warn`; vencida o falló: `err`; preparando u otro: `neutral`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Datos del archivo como pares etiqueta y valor: formato, filas, vencimiento del enlace. */
  items?: ExportJobItem[];
  /** Destino de la descarga o del aviso; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace: la descarga con su peso cuando está lista, o pedir aviso mientras se prepara. */
  linkLabel?: string;
  /** Aspecto del enlace: `primary` para la descarga lista (por defecto), `secondary` para pedir aviso, `quiet` para un enlace terciario. */
  linkVariant?: "primary" | "secondary" | "quiet";
  className?: string;
}

const EXPORT_JOB_ITEMS: ExportJobItem[] = [
  { label: "Formato", value: "CSV UTF-8" },
  { label: "Filas", value: "48.214" },
  { label: "Vence", value: "en 24 h" },
];

const EXPORT_JOB_TONOS: [string, "ok" | "warn" | "err" | "neutral"][] = [
  ["disponible", "ok"],
  ["lista", "ok"],
  ["parcial", "warn"],
  ["vencid", "err"],
  ["falló", "err"],
];

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

/**
 * Estado de una exportación de datos con formato, cantidad de filas, vencimiento y enlace de descarga; se usa cuando el archivo se genera en segundo plano.
 *
 * Mientras se prepara, el enlace ofrece avisar cuando esté lista (`linkVariant="secondary"`); disponible, descarga el archivo e indica su peso, como acción principal. El estado va en texto dentro de una etiqueta con tono (`badge`), no sólo en color.
 *
 * @example <ExportJob title="Exportación regional" status="Disponible" href="/exportaciones/184.csv" linkLabel="Descargar 8,2 MB" />
 * @example <ExportJob status="Preparando" items={[{ label: "Formato", value: "CSV UTF-8" }, { label: "Filas", value: "48.214" }, { label: "Estimado", value: "3 min" }]} href="/exportaciones/184/aviso" linkLabel="Avisarme cuando esté lista" linkVariant="secondary" />
 */
export function ExportJob({
  title = "Exportación regional",
  status = "Disponible",
  statusTone,
  items = EXPORT_JOB_ITEMS,
  href = "#descargar",
  linkLabel = "Descargar 8,2 MB",
  linkVariant = "primary",
  className,
}: ExportJobProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-export-job>
      <header>
        <strong>{title}</strong>
        {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {href && linkLabel ? <a className={`btn btn--${linkVariant}`} href={href}>{linkLabel}</a> : null}
    </section>
  );
}