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

/* 分段器（移动端）— 规格 §38
   2~5 个互斥选项横排，选中项是「白色滑块 + 品牌字色」，不是靠色相区分。
   受控：本端不存选中值，只回传目标值 onChange，是否采纳由宿主决定。
   每个选项是原生 button（整项可点、可键盘聚焦），role=radio 表达互斥语义。 */
export default function Segmented({
  value = '',
  options = [],
  size = 'default',
  block = false,
  disabled = false,
  label = '分段选择',
  onChange,
}) {
  const cls =
    'kole-m-segmented' +
    ` kole-m-segmented--${size}` +
    (block ? ' kole-m-segmented--block' : '') +
    (disabled ? ' is-disabled' : '');

  return (
    <div className={cls} role="radiogroup" aria-label={label} aria-disabled={disabled ? 'true' : undefined}>
      {options.map((op) => {
        const active = op.value === value;
        const off = disabled || !!op.disabled;
        return (
          <button
            key={op.value}
            className={'kole-m-segmented__item' + (active ? ' is-active' : '')}
            type="button"
            role="radio"
            aria-checked={active ? 'true' : 'false'}
            data-value={op.value}
            disabled={off}
            onClick={() => {
              if (off || active) return;
              if (onChange) onChange(op.value);
            }}
          >
            {op.label}
          </button>
        );
      })}
    </div>
  );
}