"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { motion } from "framer-motion";

export default function NavList({ list_items }) {
  const pathname = usePathname();

  return (
    <nav className="h-fit relative grid items-center ">
      <ul className="flex space-x-6 relative">
        {list_items.map((item, index) => {
          const isActive = pathname === item.routeLink;
          return (
            <li key={index} className="relative">
              <Link href={item.routeLink} className={`${isActive && "text-blue-500"}`}>
                {item.name}
              </Link>

              {isActive && (
                <motion.div
                  layoutId="header-underline"
                  className="absolute -bottom-5 left-0 right-0 h-[3px] bg-blue-500 rounded"
                />
              )}
            </li>
          );
        })}
      </ul>
    </nav>
  );
}