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

const menuItems = [
    { key: 'home', path: '/', label: '首页' },
    { key: 'courses', path: '/courses', label: '全部课程' },
    { key: 'paths', path: '/paths', label: '学习路径' }
];

export const NavigationMenu = () => {
    const navigate = useNavigate();
    const { pathname } = useLocation();
    const selectedKey = menuItems.find(item => item.path === pathname)?.key || '';
    return (
        <Menu
            mode="horizontal"
            className="border-none font-medium"
            selectedKeys={[selectedKey]}
            onClick={({ key }) => {
                const selectedItem = menuItems.find(item => item.key === key);
                if (selectedItem) navigate(selectedItem.path);
            }}
        >
            {menuItems.map(({ key, label }) => (
                <Menu.Item key={key} className="text-gray-600 hover:text-blue-600">
                    {label}
                </Menu.Item>
            ))}
        </Menu>
    );
};