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: 'home', label: '首页', path: '/' },
    { key: 'staff', label: '人员总览', path: '/staff' },
    { key: 'day', label: '日统计', path: '/daily' },
    { key: 'month', label: '月统计', path: '/month' },
    { key: 'year', label: '年度统计', path: '/year' }
  ];
  return (
    <>
        {/* 导航菜单 */}
        <Menu
          theme="dark"
          mode="inline"
          className="!bg-transparent !border-0 pt-4 [&_.ant-menu-item]:!mt-2"
          defaultSelectedKeys={[
            menuItems.find((item) => item.path === location.pathname)?.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>
    </>
  );
}