Expediente.

<section class="ui-sample ui-document" data-case-file="true"><header><strong>Expediente EX-2026-004</strong><span>4 piezas</span></header><ol><li>Solicitud · folio 118</li><li>Contrato · folios 119–126</li><li>Recibo de firma · folio 127</li><li>Comprobante de pago · folio 128</li></ol><a class="btn btn--quiet" href="#expediente">Abrir secuencia completa</a></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-case-file="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Expediente EX-2026-004</strong><span>4 piezas</span></header><ol class="grid gap-2"><li>Solicitud · folio 118</li><li>Contrato · folios 119–126</li><li>Recibo de firma · folio 127</li><li>Comprobante de pago · folio 128</li></ol><a class="btn btn--quiet underline underline-offset-4" href="#expediente">Abrir secuencia completa</a></section>

export interface CaseFileItem {
  /** Nombre de la pieza («Solicitud», «Contrato»). */
  label: string;
  /** Folios que ocupa la pieza, con la palabra «folio» incluida, tal como se muestran («folio 118», «folios 119–126»); vacío muestra sólo el nombre. */
  detail?: string;
}

export interface CaseFileProps {
  /** Nombre del expediente con su código («Expediente EX-2026-004»). */
  title?: string;
  /** Total de piezas del expediente, con su unidad («4 piezas»); vacío lo oculta. Si `items` es un extracto, el total dice cuántas faltan por ver. */
  status?: string;
  /** Piezas en el orden del expediente; puede ser un extracto de la secuencia. */
  items?: CaseFileItem[];
  /** Destino de la secuencia completa; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace a la secuencia completa; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const ITEMS: CaseFileItem[] = [
  { label: "Solicitud", detail: "folio 118" },
  { label: "Contrato", detail: "folios 119–126" },
  { label: "Recibo de firma", detail: "folio 127" },
  { label: "Comprobante de pago", detail: "folio 128" },
];

/**
 * Expediente con su código, el total de piezas y las piezas en orden con sus folios; se usa para mostrar qué documentos forman un trámite y enlazar a la secuencia completa.
 *
 * Las piezas van en una lista ordenada: el orden es el del expediente. El enlace a la secuencia completa es un botón terciario (`btn btn--quiet`), para que no se lea como una pieza más.
 *
 * @example <CaseFile title="Expediente EX-2026-009" status="7 piezas" items={[{ label: "Solicitud", detail: "folio 141" }, { label: "Contrato", detail: "folios 142–150" }]} href="/expedientes/EX-2026-009" linkLabel="Ver las 7 piezas" />
 */
export function CaseFile({
  title = "Expediente EX-2026-004",
  status = "4 piezas",
  items = ITEMS,
  href = "#expediente",
  linkLabel = "Abrir secuencia completa",
  className,
}: CaseFileProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-case-file>
      {title || status ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {status ? <span>{status}</span> : null}
        </header>
      ) : null}
      {items.length ? (
        <ol>
          {items.map((item, i) => (
            <li key={`${item.label}-${i}`}>{item.detail ? `${item.label} · ${item.detail}` : item.label}</li>
          ))}
        </ol>
      ) : null}
      {href && linkLabel ? <a className="btn btn--quiet" href={href}>{linkLabel}</a> : null}
    </section>
  );
}