PDF incorporado.

<figure class="ui-sample ui-embed" data-embed="pdf"><div class="ui-embed__frame ui-embed__frame--paper ui-pdf-demo" role="img" aria-label="Vista de la primera página del contrato FYD-184"><small>FYD-184 · página 1 de 12</small><strong>Contrato de prestación de servicios</strong><p>Firmado por ambas partes.</p><span>Firmas · Anexos · Recibo</span></div><figcaption><span>Fuente: Firmas y Documentos · versión 3 · SHA-256 disponible</span><a href="#descargar-pdf">Descargar PDF</a></figcaption></figure>

<figure class="ui-sample ui-embed border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-embed="pdf"><div class="ui-embed__frame ui-embed__frame--paper ui-pdf-demo" role="img" aria-label="Vista de la primera página del contrato FYD-184"><small class="text-sm text-slate-600">FYD-184 · página 1 de 12</small><strong>Contrato de prestación de servicios</strong><p>Firmado por ambas partes.</p><span>Firmas · Anexos · Recibo</span></div><figcaption class="text-sm text-slate-600"><span>Fuente: Firmas y Documentos · versión 3 · SHA-256 disponible</span><a class="underline underline-offset-4" href="#descargar-pdf">Descargar PDF</a></figcaption></figure>

export interface PdfEmbedProps {
  /** Texto alternativo de la vista previa (`aria-label` de la imagen): qué página de qué documento muestra. */
  alt?: string;
  /** Línea sobre el título con el identificador y la página visible. */
  detail?: string;
  /** Título del documento; vacío lo oculta. */
  title?: string;
  /** Texto breve bajo el título; vacío lo oculta. */
  description?: string;
  /** Partes del documento; se muestran al pie de la vista previa, separadas por « · »; sin partes no se muestra la línea. */
  sections?: string[];
  /** Línea de fuente del pie, con versión y estado de la huella del archivo. */
  source?: string;
  /** Enlace de descarga del PDF; sin él no se muestra el enlace. */
  href?: string;
  linkLabel?: string;
  className?: string;
}

const SECCIONES = ["Firmas", "Anexos", "Recibo"];

/**
 * PDF incorporado: vista previa de la primera página de un documento que se entrega como archivo PDF, con su fuente y el enlace para descargarlo.
 *
 * La vista previa es una imagen (`role="img"`) con nombre accesible; el contenido completo se obtiene con el enlace de descarga. Para leer el documento dentro de la página, usa `DocumentEmbed`.
 *
 * @example <PdfEmbed alt="Vista de la primera página del contrato FYD-184" detail="FYD-184 · página 1 de 12" title="Contrato de prestación de servicios" source="Fuente: Firmas y Documentos · versión 4 · SHA-256 disponible" href="/documentos/fyd-184.pdf" />
 * @example <PdfEmbed alt="Vista de la primera página del informe final de evaluación INF-2026-031" detail="INF-2026-031 · página 1 de 48" title="Informe final de evaluación" description="Versión aprobada por el comité técnico." sections={["Resumen", "Metodología", "Resultados", "Anexos"]} href="/documentos/inf-2026-031.pdf" linkLabel="Descargar PDF · 2,4 MB" />
 */
export function PdfEmbed({
  alt = "Vista de la primera página del contrato FYD-184",
  detail = "FYD-184 · página 1 de 12",
  title = "Contrato de prestación de servicios",
  description = "Firmado por ambas partes.",
  sections = SECCIONES,
  source = "Fuente: Firmas y Documentos · versión 3 · SHA-256 disponible",
  href = "#descargar-pdf",
  linkLabel = "Descargar PDF",
  className,
}: PdfEmbedProps) {
  const partes = sections.filter(Boolean);
  const enlace = linkLabel && href ? <a href={href}>{linkLabel}</a> : null;
  return (
    <figure className={["ui-embed", className].filter(Boolean).join(" ")} data-embed="pdf">
      <div className="ui-embed__frame ui-embed__frame--paper ui-pdf-demo" role="img" aria-label={alt}>
        {detail ? <small>{detail}</small> : null}
        {title ? <strong>{title}</strong> : null}
        {description ? <p>{description}</p> : null}
        {partes.length ? <span>{partes.join(" · ")}</span> : null}
      </div>
      {source || enlace ? (
        <figcaption>
          {source ? <span>{source}</span> : null}
          {enlace}
        </figcaption>
      ) : null}
    </figure>
  );
}