import React from "react";
import Link from "next/link";
import Image from "next/image";
import classNames from "classnames";
import styles from "./MobileNav.module.scss";
import navlinks from "../../../constants/navlinks";
import { useTranslation } from "next-i18next";
import logoIcon2 from "../../../public/icons/logo2.svg";
import saudiGif from "../../../public/gif/saudi.gif";
import visionIcon2 from "../../../public/icons/vision2.svg";

const MobileNav = ({ isVisible, hideNav }: any) => {
  const { t } = useTranslation("common");

  return (
    <div
      className={classNames([styles.mobileNav], {
        visible: isVisible,
      })}
      onClick={hideNav}
    >
      <div
        className={classNames(
          styles.mobileNavContent,
          "p-6 text-black text-xl flex flex-col justify-between",
          {
            visible: isVisible,
          }
        )}
      >
        <div>
          <div className="mobile-nav-logo mb-10">
            <Image src={logoIcon2} alt="Logo" />
          </div>

          <nav className="mb-10">
            {navlinks.map(({ id, label, href }: any) => (
              <div key={id} className="ltr:mr-6 rtl:ml-6 mb-4">
                <Link href={href}>{t(label)}</Link>
              </div>
            ))}
          </nav>
        </div>

        <div className="flex items-center">
          <div className="flag-icon ltr:mr-8 rtl:ml-8">
            <Image src={saudiGif} alt="Saudi Arabia Flag" width={57} height={38} />
          </div>

          <div className="vision-icon ltr:mr-9 rtl:ml-9">
            <Image src={visionIcon2} alt="2030 Vision" />
          </div>
        </div>
      </div>
    </div>
  );
};

export default MobileNav;