Aviso de cookies.

<section class="ui-sample ui-feedback" data-cookie-banner="true" aria-labelledby="cookie-title-0"><h3 id="cookie-title-0">Tu privacidad</h3><p>Usamos cookies necesarias para sesión y seguridad. Analítica y contenido externo requieren tu elección.</p><div class="ui-actions"><button class="btn btn--secondary" type="button">Aceptar opcionales</button><button class="btn btn--secondary" type="button">Sólo necesarias</button><a class="btn btn--quiet" href="#preferencias">Configurar</a></div></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-cookie-banner="true" aria-labelledby="cookie-title-0"><h3 id="cookie-title-0">Tu privacidad</h3><p>Usamos cookies necesarias para sesión y seguridad. Analítica y contenido externo requieren tu elección.</p><div class="ui-actions"><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Aceptar opcionales</button><button class="btn btn--secondary border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" type="button">Sólo necesarias</button><a class="btn btn--quiet underline underline-offset-4" href="#preferencias">Configurar</a></div></section>

import type { MouseEventHandler } from "react";

export interface CookieBannerProps {
  title?: string;
  /** Id del título, referido por `aria-labelledby`; sin `title` no se emite. Usa uno distinto por aviso en la página. */
  titleId?: string;
  /** Qué cookies se usan sin preguntar y cuáles requieren elección. */
  description?: string;
  /** Texto del botón que acepta las cookies opcionales; vacío lo oculta. */
  acceptLabel?: string;
  /** Se llama al aceptar las cookies opcionales. */
  onAccept?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del botón que deja sólo las necesarias; vacío lo oculta. */
  rejectLabel?: string;
  /** Se llama al quedarse sólo con las necesarias. */
  onReject?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del enlace a las preferencias por categoría; vacío lo oculta. */
  settingsLabel?: string;
  /** Destino del enlace a las preferencias, por ejemplo el formulario `CookiePreferences`. */
  settingsHref?: string;
  className?: string;
}

/**
 * Aviso de cookies al entrar al sitio, para aceptar las opcionales, quedarse con las necesarias o abrir las preferencias por categoría.
 *
 * Aceptar y rechazar tienen el mismo peso visual. Mientras la persona no elija, la aplicación debe mantener desactivadas las cookies opcionales.
 *
 * @example <CookieBanner onAccept={aceptar} onReject={rechazar} settingsHref="/privacidad/preferencias" />
 * @example <CookieBanner titleId="cookie-title-1" description="Usamos una cookie de sesión para mantener tu acceso. La analítica y los videos de terceros siguen desactivados hasta que elijas." />
 */
export function CookieBanner({
  title = "Tu privacidad",
  titleId = "cookie-title-0",
  description = "Usamos cookies necesarias para sesión y seguridad. Analítica y contenido externo requieren tu elección.",
  acceptLabel = "Aceptar opcionales",
  onAccept,
  rejectLabel = "Sólo necesarias",
  onReject,
  settingsLabel = "Configurar",
  settingsHref = "#preferencias",
  className,
}: CookieBannerProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-cookie-banner aria-labelledby={title ? titleId : undefined}>
      {title ? <h3 id={titleId}>{title}</h3> : null}
      {description ? <p>{description}</p> : null}
      {acceptLabel || rejectLabel || settingsLabel ? (
        <div className="ui-actions">
          {acceptLabel ? <button className="btn btn--secondary" type="button" onClick={onAccept}>{acceptLabel}</button> : null}
          {rejectLabel ? <button className="btn btn--secondary" type="button" onClick={onReject}>{rejectLabel}</button> : null}
          {settingsLabel ? <a className="btn btn--quiet" href={settingsHref}>{settingsLabel}</a> : null}
        </div>
      ) : null}
    </section>
  );
}