"use client";
import Link from "next/link";
import React from "react";
import classnames from "classnames";
import { PageNameEnum } from "../../../../routerConfig";
import { useRouter } from "next/router";

interface InavItem {
  linkUrl: string;
  pageName: PageNameEnum;
}

function NavItem({ pageName, linkUrl }: InavItem) {
  const router = useRouter();
  const navItemClassNames =
    "block py-2 px-3 rounded hover:bg-gray-100 md:hover:bg-transparent md:hover:text-blue-700 md:p-0 md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent";
  const isActiveClassName =
    router.pathname === linkUrl ? "text-blue-700" : "text-white";

  return (
    <>
      <li>
        <Link
          href={linkUrl}
          className={classnames(navItemClassNames, isActiveClassName)}
        >
          {pageName}
        </Link>
      </li>
    </>
  );
}

export default NavItem;