Descarga de representación.

<section class="ui-sample ui-document" data-download-representation="true"><header><strong>Descargar representación</strong><span>FYD-184 · v4</span></header><div class="ui-actions"><a class="btn btn--primary" href="#pdf" download="FYD-184-v4.pdf">PDF firmado · 284 KB</a><a class="btn btn--secondary" href="#html" download="FYD-184-v4.html">HTML accesible · 42 KB</a></div><p>SHA-256: <code>4e2a…78bd</code></p></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-download-representation="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Descargar representación</strong><span>FYD-184 · v4</span></header><div class="ui-actions"><a class="btn btn--primary underline underline-offset-4" href="#pdf" download="FYD-184-v4.pdf">PDF firmado · 284 KB</a><a class="btn btn--secondary underline underline-offset-4" href="#html" download="FYD-184-v4.html">HTML accesible · 42 KB</a></div><p>SHA-256: <code>4e2a…78bd</code></p></section>

export interface DownloadRepresentationItem {
  /** Nombre de la representación («PDF firmado»). */
  label: string;
  href: string;
  /** Nombre del archivo al guardarlo (atributo `download`); sin valor, el navegador usa el de la dirección. */
  download?: string;
  /** Tamaño con su unidad («284 KB»); se muestra después del nombre. */
  size?: string;
  /** Peso del botón: `primary` para la descarga principal (una por bloque), `secondary` para las demás. Por defecto, la primera es `primary` y el resto `secondary`. */
  tone?: "primary" | "secondary";
}

export interface DownloadRepresentationProps {
  title?: string;
  /** Identificador y versión del documento («FYD-184 · v4»); vacío lo oculta. */
  detail?: string;
  /** Un enlace de descarga por representación. */
  items?: DownloadRepresentationItem[];
  /** Algoritmo de la huella del archivo. */
  digestAlgorithm?: string;
  /** Huella del archivo, abreviada o completa; vacío oculta la línea. */
  digest?: string;
  className?: string;
}

const DOWNLOAD_REPRESENTATION_ITEMS: DownloadRepresentationItem[] = [
  { label: "PDF firmado", href: "#pdf", download: "FYD-184-v4.pdf", size: "284 KB" },
  { label: "HTML accesible", href: "#html", download: "FYD-184-v4.html", size: "42 KB" },
];

/**
 * Bloque de descarga de un documento en sus representaciones (PDF, HTML) con el tamaño de cada archivo y su huella; se usa para que la persona guarde el archivo y pueda verificarlo.
 *
 * Cada representación es un enlace con aspecto de botón y el atributo `download`: el navegador guarda el archivo en vez de abrirlo (sólo con direcciones del mismo origen). La primera es la descarga principal.
 *
 * @example <DownloadRepresentation detail="FYD-184 · v4" items={[{ label: "PDF firmado", href: "/documentos/fyd-184/v4.pdf", download: "FYD-184-v4.pdf", size: "284 KB" }]} digest="b19f…93ce" />
 */
export function DownloadRepresentation({
  title = "Descargar representación",
  detail = "FYD-184 · v4",
  items = DOWNLOAD_REPRESENTATION_ITEMS,
  digestAlgorithm = "SHA-256",
  digest = "4e2a…78bd",
  className,
}: DownloadRepresentationProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-download-representation>
      {title || detail ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {detail ? <span>{detail}</span> : null}
        </header>
      ) : null}
      {items.length ? (
        <div className="ui-actions">
          {items.map((item, i) => (
            <a
              key={`${item.href}-${i}`}
              className={`btn btn--${item.tone ?? (i === 0 ? "primary" : "secondary")}`}
              href={item.href}
              download={item.download || true}
            >
              {item.size ? `${item.label} · ${item.size}` : item.label}
            </a>
          ))}
        </div>
      ) : null}
      {digest ? (
        <p>
          {digestAlgorithm ? `${digestAlgorithm}: ` : null}
          <code>{digest}</code>
        </p>
      ) : null}
    </section>
  );
}