"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";

const navLinks = [
  { href: "/projects", label: "projects" },
  { href: "/about", label: "about" },
  { href: "/uses", label: "uses" },
];

export default function Nav() {
  const pathname = usePathname();

  return (
    <nav className="flex gap-6 text-[13px]">
      {navLinks.map((link) => {
        const isActive =
          pathname === link.href || pathname.startsWith(`${link.href}/`);
        return (
          <Link
            key={link.href}
            href={link.href}
            className={
              isActive
                ? "text-neutral-100"
                : "text-neutral-500 hover:text-neutral-100"
            }
          >
            {link.label}
          </Link>
        );
      })}
    </nav>
  );
}