import { Menu } from "antd";
import { useNavigate, useLocation } from "react-router-dom";

export default function NavigationMenu() {
    const navigate = useNavigate();
    const location = useLocation();
    console.log(location.pathname);
    // 导航菜单项配置
  const menuItems = [
    { key: 'staff', label: '人员总览', path: '/' }, // 将path改为根路径
    { key: 'plan', label: '培训计划', path: '/plan' },
    { key: 'day', label: '每日填报', path: '/daily' },
    { key: 'exam', label: '考核成绩', path: '/exam' },
  ];

  return (
    <>
        <Menu
          theme="dark"
          mode="inline"
          className="!bg-transparent !border-0 pt-4 [&_.ant-menu-item]:!mt-2"
          selectedKeys={[ // 改用selectedKeys替代defaultSelectedKeys
            menuItems.find((item) => location.pathname.startsWith(item.path))?.key,
          ]}
        >
          {menuItems.map((item) => (
            <Menu.Item
              key={item.key}
              className="!h-14 !flex !items-center !text-gray-300 hover:!text-white group !rounded-lg mx-4"
              onClick={() => navigate(item.path)}
            >
              <div className="flex items-center justify-center w-full px-4 transition-all duration-300 h-full rounded-lg">
                <span className="text-xl font-medium">{item.label}</span>
              </div>
            </Menu.Item>
          ))}
        </Menu>
    </>
  );
}