import { Menu } from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import {
  DashboardOutlined,
  FileTextOutlined,
  BookOutlined,
  SyncOutlined,
  UserOutlined,
  TeamOutlined,
} from '@ant-design/icons'

const menuItems = [
  { key: '/dashboard', icon: <DashboardOutlined />, label: '仪表盘' },
  { key: '/tps', icon: <FileTextOutlined />, label: 'TPS 选题策划' },
  { key: '/knowledge', icon: <BookOutlined />, label: '知识库' },
  { key: '/doco', icon: <SyncOutlined />, label: '文稿对齐' },
  { key: '/editor-home', icon: <UserOutlined />, label: '个人首页' },
  { key: '/users', icon: <TeamOutlined />, label: '用户管理' },
]

function SideNav() {
  const navigate = useNavigate()
  const location = useLocation()

  return (
    <div className="side-nav">
      <div className="side-nav-logo">
        <span className="logo-text">军事科技</span>
        <span className="logo-sub">TPS 工作台</span>
      </div>
      <Menu
        mode="inline"
        selectedKeys={[location.pathname]}
        items={menuItems}
        onClick={({ key }) => navigate(key)}
        className="side-nav-menu"
      />
    </div>
  )
}

export default SideNav