Contenido de terceros.

<figure class="ui-sample ui-embed" data-embed="third-party"><div class="ui-embed__frame ui-embed__frame--wide"><iframe title="Horario de atención publicado por el proveedor" srcDoc="&lt;!doctype html&gt;&lt;html lang=&#x27;es&#x27;&gt;&lt;meta charset=&#x27;utf-8&#x27;&gt;&lt;style&gt;body{margin:0;padding:18px;color:#172028;background:#eef0f1;font:14px sans-serif}button{border:1px solid #172028;background:#fff;padding:8px}&lt;/style&gt;&lt;p&gt;&lt;strong&gt;Horario de atención · oficina Santiago Centro&lt;/strong&gt;&lt;/p&gt;&lt;p id=&#x27;state&#x27;&gt;Revisa el horario antes de ir a la oficina.&lt;/p&gt;&lt;button onclick=&quot;document.getElementById(&#x27;state&#x27;).textContent=&#x27;Lunes a viernes, de 8:30 a 14:00.&#x27;&quot;&gt;Ver horario de hoy&lt;/button&gt;&lt;/html&gt;" loading="lazy" sandbox="allow-scripts"></iframe></div><figcaption><span>Fuente: proveedor autorizado · vista 1</span><a href="#abrir-embed">Abrir vista completa</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="third-party"><div class="ui-embed__frame ui-embed__frame--wide"><iframe title="Horario de atención publicado por el proveedor" srcDoc="&lt;!doctype html&gt;&lt;html lang=&#x27;es&#x27;&gt;&lt;meta charset=&#x27;utf-8&#x27;&gt;&lt;style&gt;body{margin:0;padding:18px;color:#172028;background:#eef0f1;font:14px sans-serif}button{border:1px solid #172028;background:#fff;padding:8px}&lt;/style&gt;&lt;p&gt;&lt;strong&gt;Horario de atención · oficina Santiago Centro&lt;/strong&gt;&lt;/p&gt;&lt;p id=&#x27;state&#x27;&gt;Revisa el horario antes de ir a la oficina.&lt;/p&gt;&lt;button onclick=&quot;document.getElementById(&#x27;state&#x27;).textContent=&#x27;Lunes a viernes, de 8:30 a 14:00.&#x27;&quot;&gt;Ver horario de hoy&lt;/button&gt;&lt;/html&gt;" loading="lazy" sandbox="allow-scripts"></iframe></div><figcaption class="text-sm text-slate-600"><span>Fuente: proveedor autorizado · vista 1</span><a class="underline underline-offset-4" href="#abrir-embed">Abrir vista completa</a></figcaption></figure>

export interface ThirdPartyEmbedProps {
  /** Nombre accesible del `<iframe>`: qué contiene, no quién lo provee. */
  title?: string;
  /** Dirección del contenido del proveedor; si la pasas sin `srcDoc`, no se emite el documento de ejemplo. */
  src?: string;
  /** Documento HTML en línea del `<iframe>`; por defecto, un ejemplo aislado. */
  srcDoc?: string;
  /** Permisos del `<iframe>` aislado; `""` aplica todas las restricciones. */
  sandbox?: string;
  /** Proveedor del contenido, con su prefijo («Fuente: …»); vacío lo oculta. */
  source?: string;
  /** Dato secundario tras la fuente, separado por « · », como el número de vista; vacío se omite. */
  detail?: string;
  /** Texto del enlace a la vista completa; sin él o sin `href` no se muestra. */
  linkLabel?: string;
  href?: string;
  className?: string;
}

const THIRD_PARTY_EMBED_DOCUMENTO = `<!doctype html><html lang='es'><meta charset='utf-8'><style>body{margin:0;padding:18px;color:#172028;background:#eef0f1;font:14px sans-serif}button{border:1px solid #172028;background:#fff;padding:8px}</style><p><strong>Horario de atención · oficina Santiago Centro</strong></p><p id='state'>Revisa el horario antes de ir a la oficina.</p><button onclick="document.getElementById('state').textContent='Lunes a viernes, de 8:30 a 14:00.'">Ver horario de hoy</button></html>`;

/**
 * Contenido de un proveedor externo (formulario, mapa, tabla) dentro de un `<iframe>` aislado, con la fuente y un enlace a la vista completa; se usa cuando el contenido vive en otro origen.
 *
 * El `<iframe>` carga en diferido y con `sandbox`; si el proveedor usa cookies o rastreo, muéstralo sólo después de `EmbedConsent` y ten `EmbedFallback` para cuando no cargue.
 *
 * @example <ThirdPartyEmbed title="Formulario de inscripción del proveedor" src="https://proveedor.example/embed/42" source="Fuente: proveedor autorizado" detail="vista 2" href="https://proveedor.example/42" />
 * @example <ThirdPartyEmbed title="Tabla de tarifas publicada por el proveedor" src="https://proveedor.example/tarifas/7" sandbox="" detail="" linkLabel="" />
 */
export function ThirdPartyEmbed({
  title = "Horario de atención publicado por el proveedor",
  src,
  srcDoc,
  sandbox = "allow-scripts",
  source = "Fuente: proveedor autorizado",
  detail = "vista 1",
  linkLabel = "Abrir vista completa",
  href = "#abrir-embed",
  className,
}: ThirdPartyEmbedProps) {
  const documento = srcDoc ?? (src ? undefined : THIRD_PARTY_EMBED_DOCUMENTO);
  const texto = [source, detail].filter(Boolean).join(" · ");
  const enlace = linkLabel && href ? <a href={href}>{linkLabel}</a> : null;
  return (
    <figure className={["ui-embed", className].filter(Boolean).join(" ")} data-embed="third-party">
      <div className="ui-embed__frame ui-embed__frame--wide">
        <iframe title={title} src={src} srcDoc={documento} loading="lazy" sandbox={sandbox}></iframe>
      </div>
      {texto || enlace ? (
        <figcaption>
          {texto ? <span>{texto}</span> : null}
          {enlace}
        </figcaption>
      ) : null}
    </figure>
  );
}