"use client";

import { useState } from "react";
import Image from "next/image";
import { Link as ScrollLink } from "react-scroll";
import { onepageMenuData } from "@/data/onepageMenuData";

interface MobileMenuWidgetProps {
  isMenuOpen: boolean;
  setIsMenuOpen: (isOpen: boolean) => void;
}

export default function MobileMenuWidget({
  isMenuOpen,
  setIsMenuOpen,
}: MobileMenuWidgetProps) {
  const [activeTargetId, setActiveTargetId] = useState(onepageMenuData[0]?.targetId ?? "home");

  return (
    <>
      {/*  Mobile Menu  */}
      <div className={`mobile-menu ${isMenuOpen ? "active" : ""}`.trim()}>
        {/*  Close Button  */}
        <div className="close-btn" onClick={() => setIsMenuOpen(false)}>
          <Image src="/assets/images/icon/xmark2.svg" alt="Close Menu" width={20} height={20} />
        </div>
        <nav>
          <ul className="main-menu11 menu-style11">
            {onepageMenuData.map((menu) => (
              <li key={menu.id} className={activeTargetId === menu.targetId ? "active" : ""}>
                <ScrollLink
                  to={menu.targetId}
                  spy={true}
                  smooth={true}
                  offset={-90}
                  duration={500}
                  style={{ cursor: "pointer" }}
                  className={activeTargetId === menu.targetId ? "active" : ""}
                  onSetActive={(to: string) => setActiveTargetId(to)}
                  onClick={() => setIsMenuOpen(false)}
                >
                  {menu.label}
                </ScrollLink>
              </li>
            ))}
          </ul>
        </nav>
      </div>
      <div
        className={`menu-overlay ${isMenuOpen ? "active" : ""}`.trim()}
        onClick={() => setIsMenuOpen(false)}
      ></div>
    </>
  );
}