"use client";

import { useState } from "react";
import Image from "next/image";
import { Link as ScrollLink } from "react-scroll";
import { mobileMenuData } from "@/data/shared/mobileMenuData";
import { landingMenuData } from "@/data/onepage-landing/landingMenuData";

export default function OnepageLandingMobileMenu() {
  const { closeIcon } = mobileMenuData;
  const { navItems } = landingMenuData;
  const [activeSection, setActiveSection] = useState<string>("home");

  const close = () => {
    document.querySelector(".mobile-menu")?.classList.remove("active");
    document.querySelector(".menu-overlay")?.classList.remove("active");
  };

  return (
    <>
      <div className="mobile-menu">
        <div
          className="close-btn"
          onClick={close}
          style={{ cursor: "pointer" }}
        >
          <Image src={closeIcon} alt="Close Menu" width={20} height={20} />
        </div>
        <nav className="main-menu11 menu-style11">
          <ul>
            {navItems.map((item) => (
              <li
                key={item.label}
                className={activeSection === item.to ? "active" : ""}
              >
                <ScrollLink
                  to={item.to}
                  spy={true}
                  smooth={true}
                  duration={600}
                  offset={item.offset ?? -80}
                  activeClass="active"
                  href="#"
                  onSetActive={() => setActiveSection(item.to)}
                  onClick={() => {
                    setActiveSection(item.to);
                    close();
                  }}
                >
                  {item.label}
                </ScrollLink>
              </li>
            ))}
          </ul>
        </nav>
      </div>
      <div className="menu-overlay" onClick={close} />
    </>
  );
}