"use client";

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";
import NavAuth from "./NavAuth/NavAuth";
import { Container } from "@/shared/ui";

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 (
    <header className="bg-white">
      <Container>
        <nav className="mx-auto flex items-center justify-between py-6 mm:px-[20px]">
          <div className="flex items-center gap-[10px]">
            <Link href="/">
              <Image src={logo} alt="Logo" className="navbar__logo-ti" />
            </Link>
            <Image
              className="mt-[30px] h-[120px] w-[120px] inline-block mr-[10px] object-cover"
              src={FOUNDED[locale as string]}
              alt="Founded by EU Image"
            />
            <NavLanguage />
          </div>
          <nav className="hidden lg:flex lg:justify-between lg:gap-x-4 w-[500px]">
            {LINKS().map((link) => (
              <Link
                className={`text-black opacity-0.5 font-normal${
                  pathname === link.pathname ? "opacity-1 font-bold" : ""
                }`}
                key={link.id}
                href={link.pathname}
              >
                {link.pagename}
              </Link>
            ))}
          </nav>
          <div className="hidden lg:flex items-center gap-6">
            <NavAuth setOpenMenu={setOpenMenu} />
          </div>

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

          {openMenu && <NavMenu setOpenMenu={setOpenMenu} />}
        </nav>
      </Container>
    </header>
  );
};

export default Navbar;