"use client";

import "./Navbar.scss";
import Image, { StaticImageData } 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";
import founded_ru from "./assets/founded-ru.png";
import founded_en from "./assets/founded-en.png";
import founded_kg from "./assets/founded-kg.png";
import { useParams } from "next/navigation";

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

  const FOUNDED: Record<string, StaticImageData> = {
    ru: founded_ru,
    kg: founded_kg,
    en: founded_en,
  };

  return (
    <section className="navbar">
      <div className="navbar__logo">
        <Link href="/">
          <Image src={logo} alt="Logo" className="navbar__logo-ti" />
        </Link>
        <Image
          className="navbar__logo_last"
          src={FOUNDED[locale as string]}
          alt="Founded by EU Image"
        />
        <NavLanguage />
      </div>

      <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">
        <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;
