import { RadioChangeEvent } from 'antd';
import { Icon, Tabs } from '@btri-ui/base';
import React, { useState } from 'react';

const { TabPane } = Tabs;

type TabPosition = 'left' | 'right' | 'top' | 'bottom';

const App: React.FC = () => {
  const [mode, setMode] = useState<TabPosition>('top');

  const handleModeChange = (e: RadioChangeEvent) => {
    setMode(e.target.value);
  };

  return (
    <div>
      <Tabs
        defaultActiveKey="1"
        tabPosition={mode}
        style={{ marginBottom: 32 }}
      >
        {[...Array.from({ length: 30 }, (_, i) => i)].map(i => (
          <TabPane tab={`选项 ${i}`} key={i} disabled={i === 28}>
            选项 {i} 的内容
          </TabPane>
        ))}
      </Tabs>
      <Tabs defaultActiveKey="1" type="editable-card" tabPosition={mode}>
        {[...Array.from({ length: 30 }, (_, i) => i)].map(i => (
          <TabPane
            tab={`选项 ${i}`}
            key={i}
            disabled={i === 28}
            closeIcon={<Icon iconName="CloseSmall" />}
          >
            选项 {i} 的内容
          </TabPane>
        ))}
      </Tabs>
    </div>
  );
};

export default App;