Firmas.

<section class="ui-sample ui-document" data-signature-block="true"><header><strong>Firmas</strong><span>2 de 2 verificadas</span></header><dl><div><dt>Martín Illanes</dt><dd><span class="badge badge--ok">Firmado</span> 17:12 CLT</dd></div><div><dt>Representante</dt><dd><span class="badge badge--ok">Firmado</span> 17:08 CLT</dd></div></dl><a href="#recibo">Ver recibos de firma</a></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-signature-block="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Firmas</strong><span>2 de 2 verificadas</span></header><dl class="grid gap-2"><div><dt>Martín Illanes</dt><dd><span class="badge badge--ok">Firmado</span> 17:12 CLT</dd></div><div><dt>Representante</dt><dd><span class="badge badge--ok">Firmado</span> 17:08 CLT</dd></div></dl><a class="underline underline-offset-4" href="#recibo">Ver recibos de firma</a></section>

/** Tono de la insignia de estado de una firma: `ok` firmada, `warn` pendiente, `err` rechazada o vencida, `neutral` sin tono. */
export type SignatureBlockTone = "ok" | "warn" | "err" | "neutral";

export interface SignatureBlockSigner {
  /** Nombre o cargo de quien firma. */
  name: string;
  /** Estado de la firma («Firmado», «Pendiente», «Rechazado»); va en una insignia. */
  status: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Firmado» → `ok`, «Pendiente» → `warn`, «Rechazado» y «Vencido» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: SignatureBlockTone;
  /** Hora de la firma o plazo de la pendiente («17:12 CLT», «vence 29 ago»), tras la insignia de estado; vacío muestra sólo el estado. */
  detail?: string;
}

export interface SignatureBlockProps {
  title?: string;
  /** Resumen del conjunto de firmas («2 de 2 verificadas»); vacío lo oculta. */
  summary?: string;
  /** Firmantes en el orden en que deben firmar. */
  signers?: SignatureBlockSigner[];
  /** Destino de los recibos de firma; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace a los recibos; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const SIGNATURE_BLOCK_SIGNERS: SignatureBlockSigner[] = [
  { name: "Martín Illanes", status: "Firmado", detail: "17:12 CLT" },
  { name: "Representante", status: "Firmado", detail: "17:08 CLT" },
];

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

const SIGNATURE_BLOCK_TONES: Record<string, SignatureBlockTone> = {
  "Firmado": "ok",
  "Firmada": "ok",
  "Pendiente": "warn",
  "Rechazado": "err",
  "Rechazada": "err",
  "Vencido": "err",
  "Vencida": "err",
};

/**
 * Bloque de firmas de un documento con el estado y la hora de cada firmante; va al final del documento, con un enlace a los recibos de firma.
 *
 * El estado de cada firma va en texto dentro de una insignia con tono.
 *
 * @example <SignatureBlock summary="2 de 2 verificadas" href="/documentos/FYD-184/recibos" />
 * @example <SignatureBlock summary="1 de 2 pendientes" signers={[{ name: "Martín Illanes", status: "Pendiente" }, { name: "Representante", status: "Firmado", detail: "17:08 CLT" }]} />
 */
export function SignatureBlock({
  title = "Firmas",
  summary = "2 de 2 verificadas",
  signers = SIGNATURE_BLOCK_SIGNERS,
  href = "#recibo",
  linkLabel = "Ver recibos de firma",
  className,
}: SignatureBlockProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-signature-block>
      <header>
        <strong>{title}</strong>
        {summary ? <span>{summary}</span> : null}
      </header>
      {signers.length ? (
        <dl>
          {signers.map((signer, i) => (
            <div key={`${signer.name}-${i}`}>
              <dt>{signer.name}</dt>
              <dd>
                <span className={SIGNATURE_BLOCK_BADGE[signer.statusTone ?? SIGNATURE_BLOCK_TONES[signer.status] ?? "neutral"]}>{signer.status}</span>
                {signer.detail ? ` ${signer.detail}` : null}
              </dd>
            </div>
          ))}
        </dl>
      ) : null}
      {href && linkLabel ? <a href={href}>{linkLabel}</a> : null}
    </section>
  );
}