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

/* 开关（移动端）— 规格 §29
   控件是原生 button + role="switch" + aria-checked（读屏播报「开关」，不是「复选框」）。
   整行（轨道 + 文字）都是热区，行高不小于 44px —— 开关本体视觉只有 48×28。
   开态用「滑块位移 + 品牌底色」双通道表达，不靠颜色单独表意。
   本端只回传切换意图（onChange），是否真的生效由宿主决定（规格 §29.5）。 */

export default function Switch({
  checked = false,
  size = 'default',
  labelPlacement = 'right',
  disabled = false,
  label = '',
  onChange,
  children = null,
}) {
  const cls =
    'kole-m-switch' +
    (size === 'small' ? ' kole-m-switch--small' : '') +
    (labelPlacement === 'left' ? ' kole-m-switch--left' : '') +
    (checked ? ' is-on' : '') +
    (disabled ? ' is-disabled' : '');

  return (
    <button
      className={cls}
      type="button"
      role="switch"
      aria-checked={checked ? 'true' : 'false'}
      aria-label={label || undefined}
      aria-disabled={disabled ? 'true' : undefined}
      disabled={disabled}
      onClick={() => {
        if (disabled) return;
        if (onChange) onChange(!checked);
      }}
    >
      <span className="kole-m-switch__track" aria-hidden="true">
        <span className="kole-m-switch__knob" />
      </span>
      {children || label ? <span className="kole-m-switch__text">{children || label}</span> : null}
    </button>
  );
}