/**
 * [INPUT]: 依赖 extracted.css 的 .zzm-switch / .zzm-switch__knob（滑块落影 + 焦点光晕）
 * [OUTPUT]: 对外提供 Switch 组件——墨色开关（42×25 轨道 · 20px 白滑块 · 缓动 cubic-bezier(.2,.7,.2,1)）
 * [POS]: src/extracted 的表单控件，1:1 提炼自 edu AdmDesign「06 · 开关与表单」样张（数值逐字保留，含 25/2.5 等样张原值）。
 *   受控组件：checked + onChange(next)；role="switch" 保证读屏可达
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

export function Switch({ checked = false, onChange, disabled = false, label, id }) {
  return (
    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
      <button
        id={id}
        type="button"
        role="switch"
        aria-checked={checked}
        aria-label={label ? undefined : '开关'}
        disabled={disabled}
        onClick={() => onChange?.(!checked)}
        className="zzm-switch"
        style={{
          width: 42, height: 25, borderRadius: 999, border: 0, padding: 0, flex: 'none', position: 'relative',
          cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.6 : 1,
          background: disabled ? '#EDEDEA' : checked ? '#1D1D1B' : '#D8D8D3',
          transition: 'background .2s ease',
        }}
      >
        <span className="zzm-switch__knob" style={{
          position: 'absolute', top: 2.5, left: checked ? 19.5 : 2.5, width: 20, height: 20,
          borderRadius: '50%', background: '#FFFFFF', transition: 'left .2s cubic-bezier(.2,.7,.2,1)',
        }} />
      </button>
      {label ? (
        <label htmlFor={id} style={{ fontSize: 12.5, color: disabled ? '#B0B0AA' : '#3F3F3B' }}>{label}</label>
      ) : null}
    </span>
  )
}