"use client";

import { NAV_ITEMS } from "@/lib/constans";
import Link from "next/link";
import { usePathname } from "next/navigation";

const NavItems = () => {
    const pathname = usePathname();
    const isActive = (path: string) => {
        if(path === '/') return pathname === '/';

        return pathname.startsWith(path);
    }
  return (
    <ul className="flex flex-col sm:flex-row p-2 gap-3 sm:gap-10 font-medium">
        {NAV_ITEMS.map(({ label, href }) => {
            const active = isActive(href);
            
            return (
                <li key={href}>
                    <Link href={href} className={`hover:text-yellow-500 transition-colors ${
                        active 
                        ? 'text-gray-100 font-bold'
                        : ''
                    }`}
                >
                        {label}
                    </Link>
                </li>
            );
        })}
    </ul>
  );
};

export default NavItems;