import React from 'react';
import styles from './style/index.module.less';
import { Button, Input, Radio, Space, Tag, Divider } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';
import SideBar from '@/pages/componentDevelopment/componentTest/sideBar';
import InstanceList from '@/pages/componentDevelopment/componentTest/instanceList';

const Group = Radio.Group;

const ComponentTest = () => {
  return (
    <div className={styles['component-test']}>
      <div className={styles['header']}>
        <Group defaultValue={'Beijing'} name="button-radio-group">
          {['总数126', '已测试45', '未测试81'].map((item, index) => {
            return (
              <Radio key={item} value={item}>
                {({ checked }) => {
                  return (
                    <Tag size="large" tabIndex={-1} key={item} color={['purple', 'arcoblue', 'orangered'][index]}>
                      {item}
                    </Tag>
                  );
                }}
              </Radio>
            );
          })}
        </Group>

        <Space split={<Divider type="vertical" />}>
          <Input
            prefix={<IconSearch />}
            placeholder={'搜索'}
            style={{ width: 236 }}
          />
          <Button
            type="primary"
            style={{ marginLeft: 5, borderRadius: 4 }}
          >
            实例指引
          </Button>
        </Space>
      </div>
      <div className={styles['content']}>
        <div className={styles['left']}>
          <SideBar />
        </div>
        <div className={styles['right']}>
          <InstanceList />
        </div>
      </div>
    </div>
  );
};

export default ComponentTest;