import { NavLink, useLocation } from "react-router-dom";
import { useNavItem } from "./useNavItem";
import { twMerge } from "tailwind-merge";
import React from "react";

interface NavItem {
	to: string;
	label: string;
	icon?: React.ReactNode;
}

interface NavigationProps {
	className?: string;
}

export default function Navigation({ className }: NavigationProps) {
	const { navItems } = useNavItem();
	const location = useLocation();

	const isActive = (to: string) => {
		const [pathname, search] = to.split("?");
		return (
			location.pathname === pathname &&
			(!search ? !location.search : location.search === `?${search}`)
		);
	};

	return (
		<nav
			className={twMerge(
				"mt-4 rounded-t-xl bg-gradient-to-r from-primary-500 to-primary-600  shadow-lg",
				className
			)}>
			<div className="flex flex-col md:flex-row items-stretch">
				{/* Desktop Navigation */}
				<div className="hidden md:flex items-center px-6 py-2 w-full overflow-x-auto">
					<div className="flex space-x-6 min-w-max">
						{navItems.map((item) => (
							<NavLink
								key={item.to}
								to={item.to}
								className={({ isActive: active }) =>
									twMerge(
										"relative px-4 py-2.5 text-sm font-medium",
										"text-gray-300 hover:text-white",
										"transition-all duration-200 ease-out group",
										active && "text-white"
									)
								}>
								<span className="relative z-10 flex items-center gap-2 transition-transform group-hover:translate-y-[-1px]">
									{item.icon}
									<span className="tracking-wide">
										{item.label}
									</span>
								</span>

								{/* Active Indicator */}
								<span
									className={twMerge(
										"absolute bottom-0 left-1/2 h-[2px] bg-blue-400",
										"transition-all duration-300 ease-out",
										"transform -translate-x-1/2",
										isActive(item.to)
											? "w-full opacity-100"
											: "w-0 opacity-0 group-hover:w-1/2 group-hover:opacity-40"
									)}
								/>

								{/* Hover Glow Effect */}
								<span
									className={twMerge(
										"absolute inset-0 rounded-lg bg-blue-400/0",
										"transition-all duration-300",
										"group-hover:bg-blue-400/5"
									)}
								/>
							</NavLink>
						))}
					</div>
				</div>

				{/* Mobile Navigation */}
				<div className="md:hidden flex overflow-x-auto scrollbar-none px-4 py-2">
					<div className="flex space-x-4 min-w-max">
						{navItems.map((item) => (
							<NavLink
								key={item.to}
								to={item.to}
								className={({ isActive: active }) =>
									twMerge(
										"px-3 py-1.5 text-sm font-medium rounded-full",
										"transition-colors duration-200",
										"text-gray-300 hover:text-white",
										active && "bg-blue-500/20 text-white"
									)
								}>
								<span className="flex items-center gap-1.5">
									{item.icon}
									<span>{item.label}</span>
								</span>
							</NavLink>
						))}
					</div>
				</div>
			</div>
		</nav>
	);
}
