import { createElement, render } from 'rax';
import DriverUniversal from 'driver-universal';
import View from 'rax-view';
import Text from 'rax-text';
import { Tab, Icon } from '@alifd/meet';
import './index.css';

const TabDemo = () => {
  return (
    <View>
      <Text className="demo-title">Basic</Text>
      <View className="demo-content">
        <Tab
          defaultActiveKey={'2'}
          dataSource={[
            { title: 'Tab 1', key: '1' },
            { title: 'Tab 2', key: '2' },
            { title: 'Tab 3', key: '3' },
          ]}
        />
      </View>
      <Text className="demo-title">Capsule Tab</Text>
      <View className="demo-content">
        <Tab
          size="small"
          shape="capsule"
          defaultActiveKey="1"
          dataSource={[
            { title: 'Tab 1', key: '1' },
            { title: 'Tab 2', key: '2' },
            { title: 'Tab 3', key: '3' },
          ]}
        />
        <Tab
          shape="capsule"
          defaultActiveKey="1"
          dataSource={[
            { title: 'Tab 1', key: '1' },
            { title: 'Tab 2', key: '2' },
            { title: 'Tab 3', key: '3' },
          ]}
        />
        <Tab
          size="large"
          shape="capsule"
          defaultActiveKey="1"
          dataSource={[
            { title: 'Tab 1', key: '1' },
            { title: 'Tab 2', key: '2' },
            { title: 'Tab 3', key: '3' },
          ]}
        />
      </View>

      <Text className="demo-title">Sizes</Text>
      <View className="demo-content">
        <Tab
          size="small"
          defaultActiveKey="1"
          dataSource={[
            { title: 'Tab 1', key: '1', icon: 'favorite' },
            { title: 'Tab 2', key: '2', icon: 'favorite' },
            { title: 'Tab 3', key: '3', icon: 'favorite' },
          ]}
        />
        <Tab
          size="medium"
          defaultActiveKey="1"
          dataSource={[
            { title: 'Tab 1', key: '1', icon: 'favorite' },
            { title: 'Tab 2', key: '2', icon: 'favorite' },
            { title: 'Tab 3', key: '3', icon: 'favorite' },
          ]}
        />
        <Tab
          defaultActiveKey="1"
          size="large"
          dataSource={[
            { title: 'Tab 1', key: '1', icon: 'favorite' },
            { title: 'Tab 2', key: '2', icon: 'favorite' },
            { title: 'Tab 3', key: '3', icon: 'favorite' },
          ]}
        />
      </View>
      <Text className="demo-title">onChange</Text>
      <View className="demo-content">
        <Tab
          defaultActiveKey={'2'}
          dataSource={[
            { title: 'Tab 1', key: '1' },
            { title: 'Tab 2', key: '2' },
            { title: 'Tab 3', key: '3' },
          ]}
          onChange={(key) => {
            console.log(key);
          }}
        />
      </View>
      <Text className="demo-title">Controlled</Text>
      <View className="demo-content">
        <Tab
          activeKey={'3'}
          dataSource={[
            { title: 'Tab 1', key: '1' },
            { title: 'Tab 2', key: '2' },
            { title: 'Tab 3', key: '3' },
          ]}
          onChange={(key) => {
            console.log(key);
          }}
        />
      </View>
    </View>
  );
};

// render(<TabDemo />, null, { driver: DriverUniversal });
 export default TabDemo