import { NavLink } from "react-router-dom";
import { useNavItem } from "./useNavItem";

interface NavigationProps {
  className?: string;
}

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

  return (
    <nav className={`mt-4 rounded-lg bg-[#0B1A32]/90 ${className}`}>
      <div className="flex flex-col md:flex-row items-stretch">
        {/* Desktop Navigation */}
        <div className="hidden md:flex items-center px-6 py-1 w-full overflow-x-auto scrollbar-thin scrollbar-thumb-[#00308F] scrollbar-track-transparent">
          <div className="flex space-x-4 min-w-max">
            {navItems.map((item) => (
              <NavLink
                key={item.to}
                to={item.to}
                className={({ isActive }) => `
                  group relative px-4 py-3
                  transition-all duration-300 ease-out
                  ${isActive ? 'text-white font-medium' : 'text-[#8EADD4]'}
                `}
              >
                {({ isActive }) => (
                  <>
                    <span className="relative z-10 transition-colors group-hover:text-white flex items-center gap-2">

                      {item.label}
                    </span>
                    <span
                      className={`
                        absolute bottom-1.5 left-1/2 h-[2px] bg-white
                        transition-all duration-300 ease-out
                        transform -translate-x-1/2
                        ${isActive
                          ? 'w-12 opacity-100'
                          : 'w-0 opacity-0 group-hover:w-8 group-hover:opacity-50'
                        }
                      `}
                    />
                  </>
                )}
              </NavLink>
            ))}
          </div>
        </div>
      </div>
    </nav>)
}