import Link from "next/link";
import { useState } from "react";
export default function MobileMenu() {
  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">
        {/* DROPDOWN SUB MENU */}
        <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">
            About <span className="wsarrow" />
          </Link>
          <ul
            className="sub-menu"
            style={{ display: `${isActive.key == 1 ? "block" : "none"}` }}
          >
            <li aria-haspopup="true">
              <Link href="#merms-about">Why MERMS?</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="#merms-works">How It Works</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="/contacts">Contacts Us</Link>
            </li>
            <li aria-haspopup="true">
              <Link href="/faqs">F.A.Q.</Link>
            </li>
          </ul>
        </li>
        {/* SIMPLE NAVIGATION LINK */}
        <li className="nl-simple" aria-haspopup="true">
          <Link href="#merms-features" className="h-link">
            Features
          </Link>
        </li>

        {/* SIGN IN LINK */}
        <li
          className="nl-simple reg-fst-link mobile-last-link"
          aria-haspopup="true"
        >
          <Link href={process.env.NEXT_PUBLIC_LOGIN_URL} className="h-link">
            Sign in
          </Link>
        </li>
        {/* SIGN UP BUTTON */}
        <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"
          >
            Sign up
          </Link>
        </li>
      </ul>
    </>
  );
}