'use client';
import React from "react";
import Link from "next/link";
import Image from "next/image";
import Jefes from "../../../public/jefes_logo.jpg";
import { usePathname } from "next/navigation";
import classnames from 'classnames';

const NavBar = () => {
    const currentPath = usePathname();
    console.log(currentPath);

  // Create an array to hold the list items
  const links = [
    { label: "Dashboard", href: "/Dashboard" },
    { label: "Issues", href: "/Issues" },
  ];

  return (
    <nav className="flex gap-4 border-b mb-5 px-5 h-14 items-center">
      <Link href="/">
        <Image src={Jefes} width={50} height={50} alt="Logo" />
      </Link>
      <ul className="flex gap-4 hover:cursor-pointer">
        {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({
                'text-zinc-900': link.href === currentPath,
                'text-zinc-500' : link.href !== currentPath,
                'hover:text-zinc-800': true,
            })}
            href={link.href}>
            {link.label}
          </Link>
        ))}
      </ul>
    </nav>
  );
};

export default NavBar;