Cuenta bloqueada.

<section class="ui-sample ui-feedback" data-account-locked="true" role="alert"><h3>Cuenta bloqueada temporalmente</h3><p>Hubo varios intentos fallidos. Podrás volver a intentar en 14 minutos.</p><div class="ui-actions"><a class="btn btn--primary" href="#soporte">Contactar soporte</a><a class="btn btn--secondary" href="#inicio">Volver al inicio</a></div></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-account-locked="true" role="alert"><h3>Cuenta bloqueada temporalmente</h3><p>Hubo varios intentos fallidos. Podrás volver a intentar en 14 minutos.</p><div class="ui-actions"><a class="btn btn--primary underline underline-offset-4" href="#soporte">Contactar soporte</a><a class="btn btn--secondary underline underline-offset-4" href="#inicio">Volver al inicio</a></div></section>

export interface AccountLockedProps {
  title?: string;
  /** Motivo del bloqueo y cuándo o cómo se recupera el acceso. */
  description?: string;
  supportLabel?: string;
  supportHref?: string;
  homeLabel?: string;
  homeHref?: string;
  className?: string;
}

/**
 * Aviso de cuenta bloqueada, para cuando el acceso se suspende por intentos fallidos o por decisión de un administrador.
 *
 * Usa `role="alert"`: el lector de pantalla lo anuncia al aparecer. Un enlace vacío no se muestra.
 *
 * @example <AccountLocked description="Hubo varios intentos fallidos. Podrás volver a intentar en 14 minutos." />
 * @example <AccountLocked title="Acceso suspendido" description="Un administrador de tu organización suspendió esta cuenta. Pide que la reactiven o escribe a soporte si crees que es un error." supportLabel="Escribir a soporte" supportHref="/soporte" homeLabel="" />
 */
export function AccountLocked({
  title = "Cuenta bloqueada temporalmente",
  description = "Hubo varios intentos fallidos. Podrás volver a intentar en 14 minutos.",
  supportLabel = "Contactar soporte",
  supportHref = "#soporte",
  homeLabel = "Volver al inicio",
  homeHref = "#inicio",
  className,
}: AccountLockedProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} data-account-locked role="alert">
      <h3>{title}</h3>
      {description ? <p>{description}</p> : null}
      {supportLabel || homeLabel ? (
        <div className="ui-actions">
          {supportLabel ? <a className="btn btn--primary" href={supportHref}>{supportLabel}</a> : null}
          {homeLabel ? <a className="btn btn--secondary" href={homeHref}>{homeLabel}</a> : null}
        </div>
      ) : null}
    </section>
  );
}