"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useMobileMenu } from "@/components/global/MobileMenuContext";
import { mobileMenuData } from "@/data/home/mobileMenu";

function isActive(href: string, pathname: string) {
  return href === pathname;
}

export default function MobileMenu() {
  const { closeButton, menuItems } = mobileMenuData;
  const pathname = usePathname();
  const { isOpen, close } = useMobileMenu();

  return (
    <>
      <div className={`mobile-menu ${isOpen ? "active" : ""}`}>
        <div className="close-btn" onClick={close}>
          <Image
            src={closeButton.icon}
            alt={closeButton.alt}
            width={20}
            height={20}
          />
        </div>
        <nav>
          <ul className="main-menu11 menu-style11">
            {menuItems.map((item) => (
              <li
                key={item.href}
                className={isActive(item.href, pathname) ? "active" : ""}
              >
                <Link
                  href={item.href}
                  className={isActive(item.href, pathname) ? "active" : ""}
                  onClick={close}
                >
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      </div>
      <div
        className={`menu-overlay ${isOpen ? "active" : ""}`}
        onClick={close}
      />
    </>
  );
}