import './demo9.css';
import Radio from '../../radio';
import React from 'react';
import ReactDOM from 'react-dom';
import Tab from '..';
type TabPosition = 'top' | 'bottom' | 'left' | 'right';
const Demo = () => {
  const [ tabPosition, setTabPosition ] = React.useState<TabPosition>('top');

  return (
    <div>
      <Tab>
        <Tab.Item title="Tab 1" disabled key="1">
      Tab 1 content
        </Tab.Item>
        <Tab.Item title="Tab 2" key="2">
      Tab 2 content
        </Tab.Item>
        <Tab.Item title="Tab 3" key="3">
      Tab 3 content
        </Tab.Item>
      </Tab>
      <br/>
      <Radio.Group shape="button" value={tabPosition} onChange={(val: string) => setTabPosition(val as TabPosition)}>
        <Radio value="top">top</Radio>
        <Radio value="bottom">bottom</Radio>
        <Radio value="left">left</Radio>
        <Radio value="right">right</Radio>
      </Radio.Group>
      <br />
      <br />
      <Tab
        tabPosition={tabPosition}
        shape="wrapped"
        contentClassName="custom-tab-content"
      >
        <Tab.Item title="Tab 1" key="1">
          Tab 1 Content
        </Tab.Item>
        <Tab.Item title="Tab 2" key="2" >
          Tab 2 Content
        </Tab.Item>
        <Tab.Item title="Tab 3" key="3" disabled>
          Tab 3 Content
        </Tab.Item>
      </Tab>
      <br />
      <div style={{ background: '#f3f3f3', padding: '10px' }}>
        <Tab
          tabPosition={tabPosition}
          shape="wrapped"
          theme='grey'
          contentClassName="custom-tab-content"
        >
          <Tab.Item title="Tab 1" key="1">
          Tab 1 Content
          </Tab.Item>
          <Tab.Item title="Tab 2" key="2" >
          Tab 2 Content
          </Tab.Item>
          <Tab.Item title="Tab 3" key="3" disabled>
          Tab 3 Content
          </Tab.Item>
        </Tab>
      </div>
    </div>
  );
};
ReactDOM.render(
  <Demo/>, document.getElementById('tab-demo-9'),
);