Verificación de correo.

<section class="ui-sample ui-auth-status ui-auth-status--success" data-auth-source="cis-auth-authentik" data-email-verification role="status"><span class="ui-auth-status__symbol" aria-hidden="true">✓</span><div><h3>Revisa tu correo</h3><p>Enviamos un enlace a martin@example.cl. Puedes cerrar esta ventana.</p><div class="ui-actions"><button class="btn btn--secondary" type="button">Enviar otro enlace</button><a class="btn btn--quiet" href="#correo">Cambiar correo</a></div></div></section>

<section class="ui-sample ui-auth-status ui-auth-status--success border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-auth-source="cis-auth-authentik" data-email-verification role="status"><span class="ui-auth-status__symbol" aria-hidden="true">✓</span><div><h3>Revisa tu correo</h3><p>Enviamos un enlace a martin@example.cl. Puedes cerrar esta ventana.</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">Enviar otro enlace</button><a class="btn btn--quiet underline underline-offset-4" href="#correo">Cambiar correo</a></div></div></section>

import type { MouseEventHandler } from "react";

export type EmailVerificationTone = "progress" | "success" | "warning" | "error";

export interface EmailVerificationProps {
  /** Tono del aviso: `success` con el enlace enviado, `error` si el enlace venció. Define el símbolo. */
  tone?: EmailVerificationTone;
  title?: string;
  /** Qué pasó con el enlace y qué hacer ahora. */
  description?: string;
  /** Texto del botón que pide otro enlace. */
  resendLabel?: string;
  onResend?: MouseEventHandler<HTMLButtonElement>;
  /** Texto del enlace para corregir la dirección de correo. */
  changeEmailLabel?: string;
  changeEmailHref?: string;
  className?: string;
}

const EMAIL_VERIFICATION_SYMBOLS: Record<EmailVerificationTone, string> = {
  progress: "↻",
  success: "✓",
  warning: "i",
  error: "!",
};

/**
 * Aviso de verificación de correo, para después del registro: confirma el envío del enlace o informa que venció.
 *
 * Usa `role="status"`. El símbolo sigue al tono. Si ambas acciones van vacías, no se muestra la fila de acciones.
 *
 * @example <EmailVerification description="Enviamos un enlace a ana@example.cl. Puedes cerrar esta ventana." onResend={reenviar} />
 * @example <EmailVerification tone="error" title="El enlace venció" description="Solicita uno nuevo para completar el registro." />
 */
export function EmailVerification({
  tone = "success",
  title = "Revisa tu correo",
  description = "Enviamos un enlace a martin@example.cl. Puedes cerrar esta ventana.",
  resendLabel = "Enviar otro enlace",
  onResend,
  changeEmailLabel = "Cambiar correo",
  changeEmailHref = "#correo",
  className,
}: EmailVerificationProps) {
  return (
    <section
      className={["ui-auth-status", `ui-auth-status--${tone}`, className].filter(Boolean).join(" ")}
      data-auth-source="cis-auth-authentik"
      data-email-verification
      role="status"
    >
      <span className="ui-auth-status__symbol" aria-hidden="true">{EMAIL_VERIFICATION_SYMBOLS[tone]}</span>
      <div>
        <h3>{title}</h3>
        {description ? <p>{description}</p> : null}
        {resendLabel || changeEmailLabel ? (
          <div className="ui-actions">
            {resendLabel ? <button className="btn btn--secondary" type="button" onClick={onResend}>{resendLabel}</button> : null}
            {changeEmailLabel ? <a className="btn btn--quiet" href={changeEmailHref}>{changeEmailLabel}</a> : null}
          </div>
        ) : null}
      </div>
    </section>
  );
}