/**
 * @file Switch.tsx
 * @description The app's ONE on/off switch (`role="switch"`): an accent track
 * with a white knob, the same size everywhere. Settings rows, webhook targets
 * and the AI Tools list all draw this — do not hand-roll another one; a
 * yes/no choice inside a form or list is a `Checkbox` instead.
 * @author Nguyễn Ngọc Trí Vĩ <vinnt@smartgift.vn>
 */

export function Switch({
  checked,
  onChange,
  label,
  title,
  disabled = false,
}: {
  checked: boolean;
  onChange: (v: boolean) => void;
  /** Accessible name — a switch usually sits beside its visible label. */
  label?: string;
  title?: string;
  disabled?: boolean;
}) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={label}
      title={title}
      disabled={disabled}
      onClick={() => onChange(!checked)}
      className={`relative inline-flex h-5 w-9 shrink-0 items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:cursor-not-allowed disabled:opacity-50 ${
        checked ? "bg-accent" : "bg-surface-4"
      }`}
    >
      <span
        aria-hidden
        className={`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${
          checked ? "translate-x-[18px]" : "translate-x-0.5"
        }`}
      />
    </button>
  );
}