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

/**
 * Kole UI Tabs（React）
 * 对齐 组件7.txt PageTabs 规范：线型 / 卡片型 / 胶囊型，支持禁用、关闭、新增
 *
 * props:
 *  - value / defaultValue : 当前激活标签 key（受控 / 非受控）
 *  - tabs   : [{ key, label, disabled?, preventClose? }]
 *  - type   : 'line' | 'card' | 'pill'（默认 'line'）
 *  - closable / addable : Boolean
 *  - onChange(key) / onTabRemove(key) / onTabAdd()
 *  - renderPanel(key) / children(key) : 返回当前激活标签的内容
 */
export default function Tabs({
  value,
  defaultValue,
  tabs = [],
  type = 'line',
  closable = false,
  addable = false,
  onChange,
  onTabRemove,
  onTabAdd,
  renderPanel
}) {
  const current = value !== undefined ? value : defaultValue;
  const panelFn = renderPanel || (typeof children === 'function' ? children : null);

  const choose = (tab) => {
    if (tab.disabled) return;
    onChange && onChange(tab.key);
  };

  return (
    <div className={`kole-tabs type-${type}`}>
      <div className="kole-tabs-nav">
        {tabs.map((tab) => (
          <div
            key={tab.key}
            className={`kole-tabs-tab${current === tab.key ? ' is-active' : ''}${tab.disabled ? ' is-disabled' : ''}`}
            onClick={() => choose(tab)}
          >
            {tab.label}
            {closable && !tab.disabled && !tab.preventClose && (
              <span
                className="kole-tabs-close"
                title="关闭"
                onClick={(e) => { e.stopPropagation(); onTabRemove && onTabRemove(tab.key); }}
              >×</span>
            )}
          </div>
        ))}
        {addable && (
          <div className="kole-tabs-add" title="新增标签" onClick={() => onTabAdd && onTabAdd()}>+</div>
        )}
      </div>

      <div className="kole-tabs-content">
        {panelFn ? panelFn(current) : null}
      </div>
    </div>
  );
}

/*
用法示例：
import Tabs from './Tabs';

const tabs = [
  { key: 'basic', label: '基本信息' },
  { key: 'safe',  label: '安全设置' },
  { key: 'auth',  label: '授权', disabled: true }
];
<Tabs
  type="line"
  tabs={tabs}
  defaultValue="basic"
  onChange={setActive}
  renderPanel={(key) => <div>当前标签：{key}</div>}
/>
*/