Fallback de embed.

<section class="ui-sample ui-feedback" data-embed-fallback="true"><strong>No pudimos mostrar el contenido</strong><p>Tu navegador bloqueó el recurso incorporado.</p><div class="ui-actions"><a class="btn btn--primary" href="#vista-completa">Abrir la vista completa</a><a class="btn btn--secondary" href="#descargar">Descargar alternativa</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-fallback="true"><strong>No pudimos mostrar el contenido</strong><p>Tu navegador bloqueó el recurso incorporado.</p><div class="ui-actions"><a class="btn btn--primary underline underline-offset-4" href="#vista-completa">Abrir la vista completa</a><a class="btn btn--secondary underline underline-offset-4" href="#descargar">Descargar alternativa</a></div></section>

export interface EmbedFallbackProps {
  /** Qué no se pudo mostrar; vacío lo oculta. */
  title?: string;
  /** Motivo: bloqueo del navegador, error del origen o formato no admitido; vacío lo oculta. */
  description?: string;
  /** Texto del enlace a la vista completa en el sitio del proveedor; sin él o sin `href` no se muestra. */
  linkLabel?: string;
  href?: string;
  /** Texto del enlace a una versión descargable del contenido; sin él o sin `downloadHref` no se muestra. */
  downloadLabel?: string;
  downloadHref?: string;
  className?: string;
}

/**
 * Alternativa que reemplaza a un contenido incorporado que no cargó, con el motivo y enlaces a la vista completa o a una versión descargable.
 *
 * @example <EmbedFallback href="https://proveedor.example/42" downloadHref="/archivo/42.csv" />
 * @example <EmbedFallback description="El origen respondió con error 503." downloadLabel="" />
 */
export function EmbedFallback({
  title = "No pudimos mostrar el contenido",
  description = "Tu navegador bloqueó el recurso incorporado.",
  linkLabel = "Abrir la vista completa",
  href = "#vista-completa",
  downloadLabel = "Descargar alternativa",
  downloadHref = "#descargar",
  className,
}: EmbedFallbackProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-embed-fallback>
      {title ? <strong>{title}</strong> : null}
      {description ? <p>{description}</p> : null}
      {(linkLabel && href) || (downloadLabel && downloadHref) ? (
        <div className="ui-actions">
          {linkLabel && href ? <a className="btn btn--primary" href={href}>{linkLabel}</a> : null}
          {downloadLabel && downloadHref ? <a className="btn btn--secondary" href={downloadHref}>{downloadLabel}</a> : null}
        </div>
      ) : null}
    </section>
  );
}