Consentimiento para embed.

<section class="ui-sample ui-feedback" data-embed-consent="true"><strong>Contenido externo bloqueado</strong><p>Actívalo sólo si aceptas cargar recursos del proveedor.</p><div class="ui-actions"><button class="btn btn--primary" type="button">Permitir esta vez</button><a class="btn btn--quiet" href="#privacidad">Política de privacidad</a></div></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-embed-consent="true"><strong>Contenido externo bloqueado</strong><p>Actívalo sólo si aceptas cargar recursos del proveedor.</p><div class="ui-actions"><button class="btn btn--primary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Permitir esta vez</button><a class="btn btn--quiet underline underline-offset-4" href="#privacidad">Política de privacidad</a></div></section>

import type { MouseEventHandler } from "react";

export interface EmbedConsentProps {
  /** Qué se bloqueó, dicho en concreto; vacío lo oculta. */
  title?: string;
  /** Qué cargará el proveedor si se permite: recursos, cookies o rastreo; vacío lo oculta. */
  description?: string;
  /** Texto del botón que permite cargar el contenido; vacío lo oculta. */
  allowLabel?: string;
  /** Se llama al permitir; la página reemplaza este aviso por el contenido externo. */
  onAllow?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del enlace a la política de privacidad; sin él o sin `privacyHref` no se muestra. */
  privacyLabel?: string;
  privacyHref?: string;
  className?: string;
}

/**
 * Aviso que reemplaza a un contenido externo bloqueado y pide permiso antes de cargar recursos del proveedor.
 *
 * Mientras la persona no permita la carga, la página no debe pedir nada al proveedor; al permitir, se muestra el contenido, por ejemplo con `ThirdPartyEmbed`. El botón de permitir es la acción principal; el enlace a la política va al lado, como acción terciaria.
 *
 * @example <EmbedConsent onAllow={cargarVideo} privacyHref="/privacidad" />
 * @example <EmbedConsent title="Video de YouTube bloqueado" description="Al reproducirlo, YouTube puede guardar cookies de terceros y registrar la visita." allowLabel="Cargar video" onAllow={cargarVideo} privacyLabel="Cómo trata YouTube tus datos" privacyHref="/privacidad#youtube" />
 */
export function EmbedConsent({
  title = "Contenido externo bloqueado",
  description = "Actívalo sólo si aceptas cargar recursos del proveedor.",
  allowLabel = "Permitir esta vez",
  onAllow,
  privacyLabel = "Política de privacidad",
  privacyHref = "#privacidad",
  className,
}: EmbedConsentProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-embed-consent>
      {title ? <strong>{title}</strong> : null}
      {description ? <p>{description}</p> : null}
      {allowLabel || (privacyLabel && privacyHref) ? (
        <div className="ui-actions">
          {allowLabel ? <button className="btn btn--primary" type="button" onClick={onAllow}>{allowLabel}</button> : null}
          {privacyLabel && privacyHref ? <a className="btn btn--quiet" href={privacyHref}>{privacyLabel}</a> : null}
        </div>
      ) : null}
    </section>
  );
}