Interruptor.

<div class="ui-sample ui-switch-row"><button id="switch-0" role="switch" type="button" aria-checked="false"><span class="ui-switch-track" aria-hidden="true"><i></i></span><span>Notificaciones por correo</span></button><small data-switch-status>Desactivadas</small></div>

<div class="ui-sample ui-switch-row border border-slate-300 bg-white p-4 text-slate-950"><button class="border border-slate-950 px-3 py-2 focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed" id="switch-0" role="switch" type="button" aria-checked="false"><span class="ui-switch-track" aria-hidden="true"><i></i></span><span>Notificaciones por correo</span></button><small class="text-sm text-slate-600" data-switch-status>Desactivadas</small></div>

import type { MouseEventHandler } from "react";

export interface SwitchProps {
  /** Id del botón. Usa uno distinto por interruptor en la página. */
  id?: string;
  /** Texto de la preferencia que se activa o desactiva. */
  label?: string;
  /** Estado del interruptor (`aria-checked`). */
  checked?: boolean;
  /** Estado escrito bajo el interruptor cuando está activado. */
  statusOn?: string;
  /** Estado escrito bajo el interruptor cuando está desactivado. */
  statusOff?: string;
  disabled?: boolean;
  /** Se llama al pulsar; quien lo usa invierte `checked`. */
  onClick?: MouseEventHandler<HTMLButtonElement>;
  className?: string;
}

/**
 * Interruptor para activar o desactivar una preferencia que se aplica al instante, con su estado escrito.
 *
 * Es un botón con `role="switch"`: el estado llega por `checked` y el cambio lo hace quien recibe `onClick`.
 *
 * @example <Switch id="avisos" label="Notificaciones por correo" checked={activas} onClick={() => setActivas(!activas)} />
 */
export function Switch({
  id = "switch-0",
  label = "Notificaciones por correo",
  checked = false,
  statusOn = "Activadas",
  statusOff = "Desactivadas",
  disabled,
  onClick,
  className,
}: SwitchProps) {
  const estado = checked ? statusOn : statusOff;
  return (
    <div className={["ui-switch-row", className].filter(Boolean).join(" ")}>
      <button id={id} role="switch" type="button" aria-checked={checked ? "true" : "false"} disabled={disabled} onClick={onClick}>
        <span className="ui-switch-track" aria-hidden="true"><i></i></span>
        <span>{label}</span>
      </button>
      {estado ? <small data-switch-status>{estado}</small> : null}
    </div>
  );
}