'use client';

interface ToggleSwitchProps {
  enabled: boolean;
  onChange: () => void;
  disabled?: boolean;
}

export function ToggleSwitch({ enabled, onChange, disabled = false }: ToggleSwitchProps) {
  return (
    <button 
      onClick={onChange}
      disabled={disabled}
      className={`relative inline-flex items-center ${disabled ? 'cursor-not-allowed opacity-80' : 'cursor-pointer'}`}
      type="button"
      role="switch"
      aria-checked={enabled}
    >
      <div className={`w-10 h-6 rounded-full transition ${enabled ? 'bg-primary' : 'bg-gray-300'}`}></div>
      <div 
        className={`absolute inset-y-0 left-0 w-6 h-6 bg-white rounded-full border border-gray-300 transform transition ${
          enabled ? 'translate-x-4' : 'translate-x-0'
        }`}
      ></div>
    </button>
  );
}