Estado de trabajo.

<section class="ui-sample ui-service" data-job-status="true"><header><strong>JOB-184 · normalización</strong><span>100%</span></header><progress value="100" max="100">100%</progress><p>6.842 filas · recibo disponible</p><a class="btn btn--quiet" href="#job">Abrir trabajo</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-job-status="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>JOB-184 · normalización</strong><span>100%</span></header><progress value="100" max="100">100%</progress><p>6.842 filas · recibo disponible</p><a class="btn btn--quiet underline underline-offset-4" href="#job">Abrir trabajo</a></section>

export interface JobStatusProps {
  /** Identificador y nombre del trabajo («JOB-184 · normalización»). */
  title?: string;
  /** Avance del trabajo, de 0 a `max`. */
  value?: number;
  max?: number;
  /** Estado visible junto al título; por defecto, el porcentaje de avance. */
  status?: string;
  /** Avance en unidades del trabajo o resultado al terminar («4.652 de 6.842 filas»). */
  description?: string;
  /** Destino del detalle del trabajo; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace al detalle; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

/**
 * Avance de un trabajo en segundo plano con barra de progreso, porcentaje y conteo; se usa mientras corre un proceso largo y al terminar, para llevar al resultado.
 *
 * La barra es un `<progress>` nativo con el porcentaje como texto alternativo. El enlace al detalle es una acción terciaria (`btn--quiet`).
 *
 * @example <JobStatus title="JOB-184 · normalización" value={68} description="4.652 de 6.842 filas" href="/trabajos/184" />
 * @example <JobStatus value={100} description="6.842 filas · recibo disponible" />
 */
export function JobStatus({
  title = "JOB-184 · normalización",
  value = 100,
  max = 100,
  status,
  description = "6.842 filas · recibo disponible",
  href = "#job",
  linkLabel = "Abrir trabajo",
  className,
}: JobStatusProps) {
  const porcentaje = `${max > 0 ? Math.round((value / max) * 100) : 0}%`;
  const estado = status ?? porcentaje;
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-job-status>
      <header>
        <strong>{title}</strong>
        {estado ? <span>{estado}</span> : null}
      </header>
      <progress value={value} max={max}>{porcentaje}</progress>
      {description ? <p>{description}</p> : null}
      {href && linkLabel ? <a className="btn btn--quiet" href={href}>{linkLabel}</a> : null}
    </section>
  );
}