import LangLink from "@/components/ui/localization/LangLink";
import { images } from "@/lib/images";
import Image from "next/image";
import LangChanger from "./LangChanger";
import UserOptions from "./UserOptions";
import TranslateClient from "@/components/ui/localization/TranslateClient";
const LargeNavbar = ({ lang, setOpen }: { lang: Lang; setOpen: Function }) => {
  return (
    <nav
      className="overflow-hidden left-0 right-0 z-50 py-3 absolute bg-black/40"
      id="largeNavBar"
    >
      <div className="container">
        <div className="flex justify-between items-center text-white">
          {/* logo */}
          <div className="w-full flex justify-start">
            <LangLink href="/">
              <Image src={images.logo} alt="logo" width={50} height={50} />
            </LangLink>
          </div>

          {/* links */}
          <ul className="hidden lg:flex justify-center gap-10 text-nowrap">
            <li>
              <LangLink href="/" className="hover:text-mainBlue duration-200">
                <TranslateClient text="home_page" />
              </LangLink>
            </li>
            <li>
              <LangLink
                href="about"
                className="hover:text-mainBlue duration-200"
              >
                <TranslateClient text="about_nawaya" />
              </LangLink>
            </li>
            <li>
              <LangLink
                href="products"
                className="hover:text-mainBlue duration-200"
              >
                <TranslateClient text="products" />
              </LangLink>
            </li>
            <li>
              <LangLink
                href="contact"
                className="hover:text-mainBlue duration-200"
              >
                <TranslateClient text="contact" />
              </LangLink>
            </li>
          </ul>

          {/* lang and create account buttons */}
          <div className="hidden lg:flex items-center w-full justify-end">
            {/* user , notification , cart icon */}
            <UserOptions withProfileImage />

            {/* lang */}
            <LangChanger lang={lang} />
          </div>

          {/* icon for open small navbar */}
          <button
            title="open navbar"
            type="button"
            className="lg:hidden"
            onClick={() => setOpen((prev: boolean) => !prev)}
          >
            <Image src={images.Frame} alt="Frame" width={35} height={35} />
          </button>
        </div>
      </div>
    </nav>
  );
};

export default LargeNavbar;