import "./NavMenu.scss";
import Image from "next/image";
import menu_icon from "./icons/menu-icon.svg";
import cross_icon from "./icons/cross-icon.svg";
import { useState } from "react";
import { pages } from "@/Shared/variables/pages";
import Link from "next/link";
import { usePathname } from "next/navigation";

const NavMenu = () => {
  const [menu, setMenu] = useState<boolean>(false);
  const auth = false;
  const pathname = usePathname();
  return (
    <>
      <button
        className="nav-menu-btn"
        onClick={() => setMenu((prev) => !prev)}
      >
        {menu ? (
          <Image src={cross_icon} alt="Cross Icon" />
        ) : (
          <Image src={menu_icon} alt="Menu Icon" />
        )}
      </button>

      {menu && (
        <div className="nav-menu">
          <ul className="nav-menu__pages">
            {pages.map((page) => (
              <li
                key={page.id}
                className={
                  page.path === pathname
                    ? "nav-menu__pages-item_active"
                    : "nav-menu__pages-item"
                }
              >
                <Link onClick={() => setMenu(false)} href={page.path}>
                  {page.page}
                </Link>
              </li>
            ))}
            {auth ? (
              <li
                className={
                  pathname === "/sign-in"
                    ? "nav-menu__pages-item_active"
                    : "nav-menu__pages-item"
                }
              >
                <Link onClick={() => setMenu(false)} href="/sign-in">
                  Войти
                </Link>
              </li>
            ) : (
              <li
                className={
                  pathname === "/profile"
                    ? "nav-menu__pages-item_active"
                    : "nav-menu__pages-item"
                }
              >
                <Link onClick={() => setMenu(false)} href="/profile">
                  Профиль
                </Link>
              </li>
            )}
          </ul>
        </div>
      )}
    </>
  );
};

export default NavMenu;
