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

/* 单选框（移动端）— 规格 §33
   一组里只能选一项（互斥由本组件负责：选中一项会清掉同组其它项）。
   触屏上没有鼠标悬停，选中态必须同时有形状差异（内圈实心点）与 aria-checked，不能只靠颜色。
   整行（圆点 + 文字）都是 44px 高的热区；横向组里每项自身也保持 44px 最小边长。
   本端不发明「取消选中」（单选一旦选中不可回到空值，规格 §33.5）。 */

export default function Radio({
  options = [],
  value = '',
  orientation = 'vertical',
  button = false,
  disabled = false,
  label = '单选项',
  onChange,
  children = null,
}) {
  const cls =
    'kole-m-radio-group' +
    (orientation === 'horizontal' ? ' kole-m-radio-group--horizontal' : '') +
    (disabled ? ' is-disabled' : '');

  function pick(key) {
    if (disabled) return;
    if (onChange) onChange(key);
  }

  return (
    <div className={cls} role="radiogroup" aria-label={label}>
      {options.map((opt, i) => {
        const item = opt || {};
        const key = item.value !== undefined ? item.value : String(i);
        const checked = key === value;
        return (
          <button
            className={
              'kole-m-radio' + (button ? ' kole-m-radio--button' : '') + (checked ? ' is-checked' : '')
            }
            key={String(key)}
            type="button"
            role="radio"
            aria-checked={checked ? 'true' : 'false'}
            aria-disabled={item.disabled || disabled ? 'true' : undefined}
            disabled={!!(item.disabled || disabled)}
            onClick={() => {
              if (item.disabled) return;
              pick(key);
            }}
          >
            {/* 圆点：装饰性（语义由 role="radio" + aria-checked 承担） */}
            <span className="kole-m-radio__icon" aria-hidden="true" />
            <span className="kole-m-radio__label">
              {item.label}
              {item.desc ? <span className="kole-m-radio__desc">{item.desc}</span> : null}
            </span>
          </button>
        );
      })}
      {children}
    </div>
  );
}