/**
 * [INPUT]: 依赖 extracted.css 的 .zzm-check（焦点光晕）
 * [OUTPUT]: 对外提供 Checkbox 组件——16px 方框（圆角 4）：选中＝墨底白勾，未选＝1.5px 描边
 * [POS]: src/extracted 的表单控件，1:1 提炼自 edu AdmDesign「06 · 开关与表单」样张。
 *   受控组件：checked + onChange(next)；整行（框 + 文字）都是点击目标
 * [PROTOCOL]: 变更时更新此头部，然后检查 CLAUDE.md
 */

export function Checkbox({ checked = false, onChange, label, disabled = false }) {
  return (
    <button
      type="button"
      role="checkbox"
      aria-checked={checked}
      disabled={disabled}
      onClick={() => onChange?.(!checked)}
      className="zzm-check"
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 8, padding: 0, border: 0, borderRadius: 4,
        background: 'transparent', fontFamily: 'inherit', cursor: disabled ? 'not-allowed' : 'pointer',
      }}
    >
      {checked ? (
        <span style={{ width: 16, height: 16, borderRadius: 4, background: '#1D1D1B', display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 'none' }}>
          <svg width="10" height="10" viewBox="0 0 12 12" aria-hidden="true">
            <path d="M2 6.2 L4.8 9 L10 3.4" stroke="#FFFFFF" strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </span>
      ) : (
        <span style={{ width: 16, height: 16, borderRadius: 4, border: '1.5px solid rgba(0,0,0,.25)', flex: 'none' }} />
      )}
      {label ? <span style={{ fontSize: 12.5, color: checked ? '#3F3F3B' : '#8B8B85' }}>{label}</span> : null}
    </button>
  )
}