import styles from './ToggleSwitch.module.css'

interface ToggleSwitchProps {
  checked: boolean
  onChange: (checked: boolean) => void
  disabled?: boolean
  ariaLabel?: string
  size?: 'default' | 'compact'
}

export function ToggleSwitch({
  checked,
  onChange,
  disabled,
  ariaLabel,
  size = 'default',
}: ToggleSwitchProps) {
  return (
    <button
      type="button"
      role="switch"
      aria-checked={checked}
      aria-label={ariaLabel ?? (checked ? 'Enabled' : 'Disabled')}
      className={`${styles.switch} ${size === 'compact' ? styles.compact : ''} ${checked ? styles.on : ''}`}
      onClick={() => onChange(!checked)}
      disabled={disabled}
    >
      <span className={styles.thumb} />
    </button>
  )
}