"use client";
import React, { useState } from "react";
import Link from "next/link";
import Image from "next/image";
import { usePathname } from "next/navigation";
import classnames from "classnames";
import { GiHamburgerMenu } from "react-icons/gi";
import { MdOutlineRestaurantMenu } from "react-icons/md";

const NavBar = () => {
  const currentPath = usePathname();
  console.log(currentPath);
  const [toggle_menu, set_toggle_menu] = useState(false);

  // Create an array to hold the list items
  const links = [
    { label: "Menu", href: "/menu" },
    { label: "About", href: "/about-us" },
    { label: "Contact", href: "/contact" },
    { label: "Gallery", href: "/gallery" },
    { label: "Reviews", href: "/reviews" },
    // { label: "Dashboard", href: "/dashboard" },
    // { label: "Users", href: "/users" },
    { label: "Issues", href: "/issues" },
  ];

  return (
    <nav className="flex p-4 bg-secondary">
      <Link href="/">
        <Image
          src="/logo.svg"
          width={0}
          height={0}
          sizes="200vw"
          style={{ width: "50%", height: "auto" }}
          alt="Logo"
          className="hidden md:block"
        />
        <Image
          src="/logo.svg"
          width={0}
          height={0}
          sizes="100vw"
          style={{ width: "50%", height: "auto" }}
          alt="Logo"
          className="block md:hidden"
        />
      </Link>
      <div className="flex justify-center p-8 mx-auto w-full">
      <ul className="hover:cursor-pointer hidden md:block space-x-4 text-xl font-sans antialiased m-auto">
        {links.map((link) => (
          <Link
            key={link.href}
            // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
            // replace with classnames object instead
            className={classnames({
              "border-b border-jefesRed text-base-100":
                link.href === currentPath,
              "text-base-100": link.href !== currentPath,
              "hover:text-jefesRed": true,
            })}
            href={link.href}
          >
            {link.label}
          </Link>
        ))}
      </ul>
      </div>
      <div className="block md:hidden">
        <GiHamburgerMenu
          className="text-base-100 text-4xl space-x-2 absolute top-3 right-3"
          onClick={() => set_toggle_menu(true)}
        />
        {toggle_menu && (
          <div className="navbar_small_screen_overlay flex_center slide_bottom">
            <MdOutlineRestaurantMenu
              fontSize={27}
              className="text-base-100 absolute top-3 right-3 text-4xl"
              onClick={() => set_toggle_menu(false)}
            />
            <ul className="flex-col text-2xl col-auto gap-4 grid-cols-1 table-auto absolute">
              {links.map((link) => (
                <Link
                  key={link.href}
                  // className={`${link.href === currentPath ? 'text-zinc-900' : 'text-zinc-500 hover:text-zinc-800'}`}
                  // replace with classnames object instead
                  className={classnames({
                    "border-b border-jefesRed text-base-100":
                      link.href === currentPath,
                    "text-base-100": link.href !== currentPath,
                    // "hover:text-jefesRed": true,
                  })}
                  href={link.href}
                >
                  {link.label}
                </Link>
              ))}
            </ul>
          </div>
        )}
      </div>
    </nav>
  );
};

export default NavBar;