import { Link, useLocation } from "react-router-dom";
import { cn } from "../../../lib/utils.ts";
import styles from "./Navigation.module.css";

interface NavItem {
	label: string;
	path: string;
}

interface NavigationProps {
	items?: NavItem[];
	className?: string;
}

const defaultItems: NavItem[] = [
	{ label: "首页", path: "/" },
	{ label: "关于", path: "/about" },
];

export function Navigation({
	items = defaultItems,
	className,
}: NavigationProps) {
	const location = useLocation();

	return (
		<nav className={cn(styles.navigation, className)}>
			{items.map((item) => {
				const isActive = location.pathname === item.path;
				return (
					<Link
						key={item.path}
						to={item.path}
						className={cn(styles.link, isActive && styles.active)}
					>
						{item.label}
					</Link>
				);
			})}
		</nav>
	);
}