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);
				window.scrollTo({
					top: 0,
					behavior: "smooth",
				});
			}}>
			{menuItems.map(({ key, label }) => (
				<Menu.Item
					key={key}
					className="text-gray-600 hover:text-blue-600">
					{label}
				</Menu.Item>
			))}
		</Menu>
	);
};