export type ToggleSwitchSize = 'sm' | 'md'

export interface ToggleSwitchProps {
  checked: boolean
  onChange: (checked: boolean) => void
  disabled?: boolean
  size?: ToggleSwitchSize
  /** Required for accessibility when there's no visible label directly associated */
  ariaLabel: string
  className?: string
}

/**
 * Toggle switch that matches the historical Settings page UI:
 * - input.sr-only + peer
 * - track with after-knob
 * - clear on/off colors
 * - light-blue focus outline
 *
 * Designed to replace all ad-hoc toggles across the admin UI for consistent UX.
 */
export function ToggleSwitch({
  checked,
  onChange,
  disabled = false,
  size = 'md',
  ariaLabel,
  className = '',
}: ToggleSwitchProps) {
  return (
    <label className={['relative inline-flex items-center', disabled ? 'cursor-not-allowed' : 'cursor-pointer', className].join(' ')}>
      <input
        type="checkbox"
        checked={checked}
        onChange={(e) => onChange(e.target.checked)}
        disabled={disabled}
        aria-label={ariaLabel}
        className="sr-only peer"
      />
      <div
        className={[
          size === 'sm' ? 'w-10 h-5' : 'w-11 h-6',
          'bg-gray-200 rounded-full',
          'peer-focus-visible:outline peer-focus-visible:outline-2 peer-focus-visible:outline-primary-300 peer-focus-visible:outline-offset-2',
          'peer-checked:bg-primary-500',
          disabled ? 'opacity-60' : '',
          // Knob (after)
          "after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border after:border-gray-300 after:rounded-full after:transition-all",
          size === 'sm' ? 'after:h-4 after:w-4' : 'after:h-5 after:w-5',
          'peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white',
        ].join(' ')}
      />
    </label>
  )
}


