"use client";

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

interface NavLinksProps {
  mobile?: boolean;
  onLinkClick?: () => void;
}

const NavLinks = ({ mobile = false, onLinkClick }: NavLinksProps) => {
  const pathname = usePathname();

  const containerClass = mobile
    ? "flex flex-col items-center gap-4 text-lg min-[828px]:flex-row min-[828px]:gap-6"
    : "hidden md:flex items-center gap-8 text-lg";

  return (
    <nav className={containerClass}>
      <Link href="/services" onClick={onLinkClick}>
        <span
          className={`${
            pathname === "/services" && "text-[var(--color-8)]"
          } font-mono`}
        >
          Service
        </span>
      </Link>
      <Link href="/about" onClick={onLinkClick}>
        <span
          className={`${
            pathname === "/about" && "text-[var(--color-8)]"
          } font-mono`}
        >
          About us
        </span>
      </Link>
      <Link href="/contact" onClick={onLinkClick}>
        <span
          className={`${
            pathname === "/contact" && "text-[var(--color-8)]"
          } font-mono`}
        >
          Contact
        </span>
      </Link>
    </nav>
  );
};

export default NavLinks;