import React from 'react';
import './ToggleSwitch.css';

/**
 * 统一的启/停开关组件
 * @param {boolean} checked - 开关状态
 * @param {function} onChange - 状态变化回调
 * @param {string} label - 标签文字 (可选，如果不提供则文字显示在开关内)
 * @param {boolean} disabled - 是否禁用
 * @param {string} size - 大小: 'small' | 'medium' (默认) | 'large'
 */
const ToggleSwitch = ({
  checked = false,
  onChange,
  label,
  disabled = false,
  size = 'medium',
  onClick = null
}) => {
  const handleClick = (e) => {
    if (disabled) return;
    e.stopPropagation();
    onChange?.(!checked);
    onClick?.();
  };

  return (
    <div
      className={`toggle-switch-container ${size} ${disabled ? 'disabled' : ''}`}
      onClick={handleClick}
      style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
    >
      <div className={`toggle-switch ${checked ? 'on' : 'off'}`}>
        <span className="toggle-text">
          {checked ? '启用' : '停用'}
        </span>
        <div className="toggle-slider"></div>
      </div>
      {label && (
        <span className="toggle-label">{label}</span>
      )}
    </div>
  );
};

export default ToggleSwitch;