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

/**
 * Kole UI Segmented（React）
 * 对齐 组件2.txt Segmented 规范：高32px、选项内边距8px 16px、容器 #F5F7FA、圆角4px、选中白底、禁用 #BFBFBF
 * options: [{ label, value, icon?, disabled? }]
 * 受控：value + onChange；非受控：defaultValue
 */
export default function Segmented({ value, defaultValue, options = [], onChange }) {
  const current = value !== undefined ? value : defaultValue;

  const choose = (opt) => {
    if (opt.disabled) return;
    if (value === undefined) onChange && onChange(opt.value);
    else onChange && onChange(opt.value);
  };

  return (
    <div className="kole-segmented">
      {options.map((opt) => (
        <button
          key={opt.value}
          className={`kole-segmented-item${current === opt.value ? ' is-active' : ''}${opt.disabled ? ' is-disabled' : ''}`}
          disabled={opt.disabled}
          onClick={() => choose(opt)}
        >
          {opt.icon && <span className="ico">{opt.icon}</span>}
          {opt.label}
        </button>
      ))}
    </div>
  );
}

/*
用法示例：
import Segmented from './Segmented';
const opts = [
  { label: '列表', value: 'list' },
  { label: '看板', value: 'kanban' },
  { label: '日历', value: 'cal', disabled: true }
];
<Segmented options={opts} defaultValue="list" onChange={setView} />
*/