import React from 'react';
import styles from './style/index.module.less';
import { Button, Input, Radio, Space } from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';
import CollapseList from './collapseList';

const ComponentDeployment = () => {
  return (
    <div className={styles['component-deployment']}>
      <div className={styles['header']}>
        <Radio.Group defaultValue={'Beijing'} name="button-radio-group">
          {['全部', '启用中', '已下架'].map((item) => {
            return (
              <Radio key={item} value={item}>
                {({ checked }) => {
                  return (
                    <Button tabIndex={-1} key={item} shape="round" type={checked ? 'primary' : 'default'}>
                      {item}
                    </Button>
                  );
                }}
              </Radio>
            );
          })}
        </Radio.Group>

        <Space>
          <Input
            prefix={<IconSearch />}
            placeholder={'搜索'}
            style={{ width: 236 }}
          />
          <Button
            type="primary"
            style={{ marginLeft: 5, borderRadius: 4 }}
          >
            实例指引
          </Button>
        </Space>
      </div>
      <div className="content">
        <CollapseList></CollapseList>
      </div>
    </div>
  );
};

export default ComponentDeployment;