"use client";

import Image from "next/image";
import Link from "next/link";
import { menuData } from "@/data/menuData";

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

export default function MobileMenuWidget({
  isMenuOpen,
  setIsMenuOpen,
  pathname,
}: MobileMenuWidgetProps) {
  const isMenuActive = (menuPath: string) => {
    if (pathname === menuPath) {
      return true;
    }

    if (pathname.startsWith("/blog-details") && menuPath === "/blog-standard") {
      return true;
    }

    return false;
  };

  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">
            {menuData.map((menu) => (
              <li
                key={menu.id}
                className={isMenuActive(menu.path) ? "active" : ""}
              >
                <Link
                  href={menu.path}
                  className={isMenuActive(menu.path) ? "active" : ""}
                >
                  {menu.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
      <div
        className={`menu-overlay ${isMenuOpen ? "active" : ""}`.trim()}
        onClick={() => setIsMenuOpen(false)}
      ></div>
    </>
  );
}