import React from "react";
import Image from "next/image";
import { headerData } from "@/data/shared/headerDataOnepage";
import { scrollToSection } from "@/utils/scrollToSection";

interface HeaderModalsProps {
  isSearchActive: boolean;
  setIsSearchActive: (active: boolean) => void;
  isMobileMenuActive: boolean;
  setIsMobileMenuActive: (active: boolean) => void;
  activeMenu: string;
  setActiveMenu: (menu: string) => void;
}

const MobileMenuOnepage: React.FC<HeaderModalsProps> = ({
  isSearchActive,
  setIsSearchActive,
  isMobileMenuActive,
  setIsMobileMenuActive,
  activeMenu,
  setActiveMenu,
}) => {
  const { navItems } = headerData;

  return (
    <>
      {/* Menu Overlay */}
      <div
        className={`menu-overlay ${
          isSearchActive || isMobileMenuActive ? "active" : ""
        }`}
        onClick={() => {
          setIsSearchActive(false);
          setIsMobileMenuActive(false);
        }}
      ></div>

      {/* Search Popup */}
      <div className={`search-popup ${isSearchActive ? "active" : ""}`}>
        <form className="search-form">
          <input type="text" placeholder="Enter Keywords..." required />
          <button type="submit" className="submit-btn">
            <Image
              src="/assets/images/icon/search.svg"
              alt="Search Icon"
              width={20}
              height={20}
            />
          </button>
        </form>
      </div>
      <div
        className={`search-overlay ${isSearchActive ? "active" : ""}`}
        onClick={() => setIsSearchActive(false)}
      />

      {/* Mobile Menu */}
      <div className={`mobile-menu ${isMobileMenuActive ? "active" : ""}`}>
        <div className="close-btn" onClick={() => setIsMobileMenuActive(false)}>
          <Image
            src="/assets/images/icon/xmark2.svg"
            alt="Close Menu"
            width={24}
            height={24}
          />
        </div>
        <nav>
          <ul className="main-menu11 menu-style11">
            {navItems.map((item) => (
              <li
                key={item.id}
                className={activeMenu === item.url ? "active" : ""}
              >
                <a
                  href={`#${item.url}`}
                  className={`cursor-pointer ${
                    activeMenu === item.url ? "active" : ""
                  }`.trim()}
                  onClick={(e) => {
                    e.preventDefault();
                    setActiveMenu(item.url);
                    scrollToSection(item.url);
                    setIsMobileMenuActive(false);
                  }}
                >
                  {item.title}
                </a>
              </li>
            ))}
          </ul>
        </nav>
      </div>
    </>
  );
};

export default MobileMenuOnepage;