import { Radio, Tabs } from '@btri-ui/base';
import React, { useState } from 'react';
const { TabPane } = Tabs;

const App = () => {
  const [type, setType] = useState('');

  const onChange = e => {
    setType(e.target.value);
  };

  const render = type => {
    return (
      <>
        <Tabs
          defaultActiveKey="1"
          type={type}
          style={{
            marginBottom: 32,
          }}
          size="small"
        >
          <TabPane tab="选项一" key="1">
            选项一
          </TabPane>
          <TabPane tab="选项二" key="2">
            选项二
          </TabPane>
          <TabPane tab="选项三" key="3">
            选项三
          </TabPane>
          <TabPane tab="选项四" key="4">
            选项四
          </TabPane>
          <TabPane tab="选项五" key="5" disabled>
            选项五
          </TabPane>
        </Tabs>
        <Tabs
          defaultActiveKey="1"
          type={type}
          style={{
            marginBottom: 32,
          }}
        >
          <TabPane tab="选项一" key="1">
            选项一
          </TabPane>
          <TabPane tab="选项二" key="2">
            选项二
          </TabPane>
          <TabPane tab="选项三" key="3">
            选项三
          </TabPane>
          <TabPane tab="选项四" key="4">
            选项四
          </TabPane>
          <TabPane tab="选项五" key="5" disabled>
            选项五
          </TabPane>
        </Tabs>
        <Tabs defaultActiveKey="1" type={type} size="large">
          <TabPane tab="选项一" key="1">
            选项一
          </TabPane>
          <TabPane tab="选项二" key="2">
            选项二
          </TabPane>
          <TabPane tab="选项三" key="3">
            选项三
          </TabPane>
          <TabPane tab="选项四" key="4">
            选项四
          </TabPane>
          <TabPane tab="选项五" key="5" disabled>
            选项五
          </TabPane>
        </Tabs>
      </>
    );
  };

  return (
    <div>
      <Radio.Group
        value={type}
        onChange={onChange}
        style={{
          marginBottom: 16,
        }}
      >
        <Radio.Button value="">常规型</Radio.Button>
        <Radio.Button value="card">卡片型</Radio.Button>
      </Radio.Group>
      {type === 'card' && render('card')}
      {type === '' && render('')}
    </div>
  );
};

export default App;