import Link from "next/link";
import { ReactNode } from "react";

interface Props {
  page: string;
  currentPage: string;
  setCurrentPage: (page: string) => void;
  currentPageClasses: string;
  children: ReactNode;
}

const NavLink = ({
  page,
  currentPage,
  setCurrentPage,
  currentPageClasses,
  children,
}: Props) => {
  const defaultClasses =
    "font-bold drop-shadow hover:text-primary-100 transition-all duration-500 ";

  return (
    <Link
      className={
        currentPage === page
          ? defaultClasses + currentPageClasses
          : defaultClasses
      }
      href={page}
      onClick={() => setCurrentPage(page)}
    >
      {children}
    </Link>
  );
};

export default NavLink;