Confirmación de cierre.

<section class="ui-sample ui-feedback" data-logout-confirmation><h3>Cerrar sesión</h3><p>Cerrarás esta sesión y volverás a la portada del producto.</p><form class="ui-actions" action="/auth/logout" method="post"><button class="btn btn--primary" type="submit">Cerrar sesión</button><a class="btn btn--secondary" href="#cuenta">Cancelar</a></form></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-logout-confirmation><h3>Cerrar sesión</h3><p>Cerrarás esta sesión y volverás a la portada del producto.</p><form class="ui-actions grid gap-3" action="/auth/logout" method="post"><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="submit">Cerrar sesión</button><a class="btn btn--secondary underline underline-offset-4" href="#cuenta">Cancelar</a></form></section>

import type { FormEventHandler } from "react";

export interface LogoutConfirmationProps {
  title?: string;
  /** Qué pasará al cerrar la sesión y adónde vuelve la persona. */
  description?: string;
  /** Ruta que recibe el formulario de cierre. */
  action?: string;
  method?: "post" | "get";
  onSubmit?: FormEventHandler<HTMLFormElement>;
  /** Texto del botón que envía el formulario. */
  submitLabel?: string;
  cancelLabel?: string;
  cancelHref?: string;
  className?: string;
}

/**
 * Confirmación de cierre de sesión, con un formulario que envía el cierre a cis-auth y un enlace para cancelar.
 *
 * Funciona sin JavaScript: el botón envía el formulario por `POST` a `action`.
 *
 * @example <LogoutConfirmation description="Cerrarás esta sesión y volverás a la portada del producto." cancelHref="/cuenta" />
 * @example <LogoutConfirmation description="También cerrarás las sesiones de este navegador." />
 */
export function LogoutConfirmation({
  title = "Cerrar sesión",
  description = "Cerrarás esta sesión y volverás a la portada del producto.",
  action = "/auth/logout",
  method = "post",
  onSubmit,
  submitLabel = "Cerrar sesión",
  cancelLabel = "Cancelar",
  cancelHref = "#cuenta",
  className,
}: LogoutConfirmationProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-logout-confirmation>
      <h3>{title}</h3>
      {description ? <p>{description}</p> : null}
      <form className="ui-actions" action={action} method={method} onSubmit={onSubmit}>
        <button className="btn btn--primary" type="submit">{submitLabel}</button>
        {cancelLabel ? <a className="btn btn--secondary" href={cancelHref}>{cancelLabel}</a> : null}
      </form>
    </section>
  );
}