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

export default function Navigation() {
    const { navItems } = useNavItem()
    return <nav className="mt-4 rounded-lg bg-[#0B1A32]/90">
        <div className="flex items-center justify-between px-6 py-1">
            <div className="flex space-x-1">
                {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">
                                    {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>
    </nav>
}