"use client";

import "./Navbar.scss";
import Image from "next/image";
import { Link } from "@/shared/config/navigation";
import { usePathname } from "@/shared/config/navigation";
import logo from "@/shared/assets/logo.svg";
import { LINKS } from "@/shared/variables/links";
import NavLanguage from "./NavLanguage/NavLanguage";
import NavAuth from "./NavAuth/NavAuth";
import menu from "./icons/menu.svg";
import cross from "./icons/cross.svg";
import NavMenu from "./NavMenu/NavMenu";
import { useState } from "react";

const Navbar = () => {
  const pathname = usePathname();
  const [openMenu, setOpenMenu] = useState<boolean>(false);

  return (
    <section className="navbar">
      <Link href="/">
        <Image src={logo} alt="Logo" />
      </Link>

      <nav className="navbar__links">
        {LINKS().map((link) => (
          <Link
            className={`navbar__link${
              pathname === link.pathname ? "_active" : ""
            }`}
            key={link.id}
            href={link.pathname}
          >
            {link.pagename}
          </Link>
        ))}
      </nav>

      <div className="navbar__lang-and-auth">
        <NavLanguage />
        <NavAuth setOpenMenu={setOpenMenu} />
      </div>

      <button
        onClick={() => setOpenMenu((prev) => !prev)}
        className="navbar__menu"
      >
        <Image src={openMenu ? cross : menu} alt="menu icon" />
      </button>

      {openMenu && <NavMenu setOpenMenu={setOpenMenu} />}
    </section>
  );
};

export default Navbar;