import React from 'react';

export interface ToggleProps {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
  size?: 'sm' | 'md' | 'lg';
  label?: string;
  description?: string;
  leftIcon?: React.ReactNode;
  rightIcon?: React.ReactNode;
  className?: string;
}

const Toggle: React.FC<ToggleProps> = ({
  checked,
  onChange,
  disabled = false,
  size = 'md',
  label,
  description,
  leftIcon,
  rightIcon,
  className = ''
}) => {
  const sizeClasses = {
    sm: 'w-8 h-4',
    md: 'w-11 h-6',
    lg: 'w-14 h-8'
  };

  const thumbSizeClasses = {
    sm: 'h-3 w-3',
    md: 'h-5 w-5',
    lg: 'h-7 w-7'
  };

  const thumbPositionClasses = {
    sm: 'after:top-[2px] after:left-[2px] peer-checked:after:translate-x-4',
    md: 'after:top-[2px] after:left-[2px] peer-checked:after:translate-x-full',
    lg: 'after:top-[2px] after:left-[2px] peer-checked:after:translate-x-6'
  };

  const handleToggle = () => {
    if (!disabled) {
      onChange(!checked);
    }
  };

  return (
    <div className={`flex items-center ${className}`}>
      {leftIcon && (
        <div className="mr-3 flex-shrink-0">
          {leftIcon}
        </div>
      )}

      <div className="flex items-center flex-1">
        <div className="flex items-center">
          <label className="relative inline-flex items-center cursor-pointer">
            <input
              type="checkbox"
              checked={checked}
              onChange={handleToggle}
              disabled={disabled}
              className="sr-only peer"
            />
            <div
              className={`
                ${sizeClasses[size]}
                bg-[var(--bg-tertiary)]
                peer-focus:outline-none
                rounded-full
                peer
                ${thumbPositionClasses[size]}
                peer-checked:after:border-white
                after:content-['']
                after:absolute
                ${thumbSizeClasses[size]}
                after:bg-white
                after:rounded-full
                after:transition-all
                peer-checked:bg-[var(--color-primary)]
                ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
              `}
            />
          </label>

          {(label || description) && (
            <div className="ml-3">
              {label && (
                <span className={`
                  text-sm font-medium text-[var(--text-primary)]
                  ${disabled ? 'opacity-50' : ''}
                `}>
                  {label}
                </span>
              )}
              {description && (
                <p className={`
                  text-xs text-[var(--text-secondary)]
                  ${disabled ? 'opacity-50' : ''}
                `}>
                  {description}
                </p>
              )}
            </div>
          )}
        </div>
      </div>

      {rightIcon && (
        <div className="ml-3 flex-shrink-0">
          {rightIcon}
        </div>
      )}
    </div>
  );
};

export default Toggle;