import React from 'react';
import { Layout, Menu } from 'antd';
import { HomeOutlined, BarChartOutlined, AlertOutlined, SettingOutlined } from '@ant-design/icons';

const { Sider: AntSider } = Layout;

const Sider = ({ collapsed, theme, currentMenu, onMenuSelect }) => {
  return (
    <AntSider 
      collapsible 
      collapsed={collapsed} 
      style={{
        background: theme === 'light' ? '#fff' : '#1f1f1f',
        boxShadow: '2px 0 8px rgba(0, 0, 0, 0.1)'
      }}
    >
      <div style={{ 
        height: 64, 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'center',
        fontSize: '16px',
        fontWeight: 'bold',
        color: theme === 'light' ? '#1890ff' : '#40a9ff',
        borderBottom: `1px solid ${theme === 'light' ? '#f0f0f0' : '#333'}`
      }}>
        {!collapsed && '功能导航'}
      </div>
      <Menu
        mode="inline"
        selectedKeys={[currentMenu]}
        onSelect={({ key }) => onMenuSelect(key)}
        style={{
          height: '100%',
          borderRight: 0,
          background: theme === 'light' ? '#fff' : '#1f1f1f'
        }}
        theme={theme}
      >
        <Menu.Item key="dashboard" icon={<HomeOutlined />}>
          市场概览
        </Menu.Item>
        <Menu.Item key="detail" icon={<BarChartOutlined />}>
          详情分析
        </Menu.Item>
        <Menu.Item key="risk-control" icon={<AlertOutlined />}>
          风控管理
        </Menu.Item>
        <Menu.Item key="config" icon={<SettingOutlined />}>
          配置管理
        </Menu.Item>
      </Menu>
    </AntSider>
  );
};

export default Sider;