"use client";

import "./Navbar.scss";
import Link from "next/link";
import logo from "./assets/logo.svg";
import Image from "next/image";
import menu_icon from "./icons/menu-icon.svg";
import { usePathname } from "next/navigation";
import NavMenu from "@/Features/NavMenu/NavMenu";
import { pages } from "@/Shared/variables/pages";
import ChangeLanguage from "@/Entities/ChangeLanguage/ChangeLanguage";
import NavAuthBtn from "@/Entities/NavAuthBtn/NavAuthBtn";

const Navbar = () => {
  const pathname = usePathname();

  return (
    <nav className="nav">
      <Link href="/" className="nav__logo">
        <Image src={logo} alt="Logo Icon" />
      </Link>

      <ul className="nav__pages">
        {pages.map((page) => (
          <li
            key={page.id}
            className={
              page.path === pathname?.slice(0, page.path.length)
                ? "nav__pages-item_active"
                : "nav__pages-item"
            }
          >
            <Link href={page.path}>{page.page}</Link>
          </li>
        ))}
      </ul>

      <div className="nav__lang-auth">
        <ChangeLanguage />
        <NavAuthBtn />
      </div>
      <NavMenu />
    </nav>
  );
};

export default Navbar;
