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

const GlobalVarContainer = () => {
  const [selectedItem, setSelectedItem] = useState('数字类型');
  
  const menuItems = [
    '数字类型',
    '字符串类型',
    '布尔类型',
    '复合类型',
    '集合类型',
    '元祖类型',
    '实例类型',
    '列表类型'
  ];

  return (
    <div className={styles['global-var-container']}>
      {/*左侧菜单*/}
      <div className={styles['global-var-menu']}>
        {menuItems.map((item, index) => (
          <div 
            key={index}
            className={selectedItem === item ? styles['selected'] : ''}
            onClick={() => setSelectedItem(item)}
          >
            {item}
          </div>
        ))}
      </div>
      <div className={styles['global-var-content']}>
        {/*头部*/}
        <div className={styles['global-var-header']}>
          <div className={styles['global-var-title']}>全局参数</div>
          <div className={styles['global-var-handle']}>
            <Space split={<Divider type="vertical" />}>
              <Input
                prefix={<IconSearch />}
                placeholder={'搜索'}
                style={{ width: 236 }}
              />
              <Button
                type="primary"
                style={{ marginLeft: 5, borderRadius: 4 }}
              >
                + 新增参数
              </Button>
            </Space>
          </div>
        </div>
        {/*数据列表*/}
        <div className={styles['global-var-list']}>
          {/*<Table columns={columns} data={eventData} pagination={false} />*/}
        </div>
      </div>
    </div>
  );
};

export default GlobalVarContainer;