import Link from "next/link";
import { useState } from "react";
import { useTranslations } from "next-intl";

export default function MobileMenu() {
  const t = useTranslations("Navigation");
  const [isActive, setIsActive] = useState({ status: false, key: "" });

  const handleToggle = (key) => {
    if (isActive.key === key) {
      setIsActive({ status: false });
    } else {
      setIsActive({ status: true, key });
    }
  };

  return (
    <>
      <ul className="wsmenu-list nav-theme">
        <li aria-haspopup="true">
          <span
            className={isActive.key == 1 ? "wsmenu-click ws-activearrow" : "wsmenu-click"}
            onClick={() => handleToggle(1)}
          >
            <i className="wsmenu-arrow" />
          </span>
          <Link href="#" className="h-link">
            {t("about")} <span className="wsarrow" />
          </Link>
          <ul className="sub-menu" style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}>
            <li aria-haspopup="true">
              <Link href="#merms-about">{t("whyMerms")}</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="#merms-works">{t("howItWorks")}</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="/contacts">{t("contactUs")}</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="/faqs">F.A.Q.</Link>
            </li>
          </ul>
        </li>
        <li className="nl-simple" aria-haspopup="true">
          <Link href="#merms-features" className="h-link">
            {t("features")}
          </Link>
        </li>
        <li className="nl-simple reg-fst-link mobile-last-link" aria-haspopup="true">
          <Link href={process.env.NEXT_PUBLIC_LOGIN_URL} className="h-link">
            {t("signIn")}
          </Link>
        </li>
        <li className="nl-simple" aria-haspopup="true">
          <Link
            href={process.env.NEXT_PUBLIC_SIGNUP_URL}
            className="btn r-04 btn--theme hover--tra-white last-link"
          >
            {t("signUp")}
          </Link>
        </li>
      </ul>
    </>
  );
}