import React, { useState } from "react";
import Link from "next/link";

interface MenuItem {
  label: string;
  href: string;
  hasDropdown?: boolean;
  subItems?: MenuItem[];
}

interface MobileMenuProps {
  isOpen: boolean;
  onClose: () => void;
}

const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose }) => {
  const [expandedMenu, setExpandedMenu] = useState<string | null>(null);

  const menuItems: MenuItem[] = [
    { label: "Home", href: "/" },
    {
      label: "ABOUT US",
      href: "/about",
      hasDropdown: true,
      subItems: [
        { label: "Our Story", href: "/about/story" },
        { label: "Our Team", href: "/about/team" },
        { label: "Mission & Vision", href: "/about/mission" },
      ],
    },
    {
      label: "OUR SERVICE",
      href: "/services",
      hasDropdown: true,
      subItems: [
        { label: "Tour Packages", href: "/services/tours" },
        { label: "Hotel Booking", href: "/services/hotels" },
        { label: "Flight Booking", href: "/services/flights" },
        { label: "Visa Services", href: "/services/visa" },
      ],
    },
    { label: "OUR CONCERN", href: "/concern" },
    { label: "NEWS", href: "/news" },
    { label: "CONTACT US", href: "/contact" },
  ];

  const toggleSubmenu = (label: string) => {
    setExpandedMenu(expandedMenu === label ? null : label);
  };

  return (
    <>
      {/* Overlay */}
      {isOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-50 z-40 lg:hidden"
          onClick={onClose}
        />
      )}

      {/* Mobile Menu */}
      <div
        className={`fixed top-0 right-0 h-full w-80 bg-white z-50 transform transition-transform duration-300 ease-in-out lg:hidden ${
          isOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex items-center justify-between p-4 border-b">
          <h2 className="text-lg font-semibold text-gray-800">Menu</h2>
          <button
            onClick={onClose}
            className="p-2 text-gray-600 hover:text-gray-800 hover:bg-gray-100 rounded-lg"
          >
            <svg
              className="w-6 h-6"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M6 18L18 6M6 6l12 12"
              />
            </svg>
          </button>
        </div>

        <div className="py-4">
          {menuItems.map((item) => (
            <div
              key={item.label}
              className="border-b border-gray-100 last:border-b-0"
            >
              {item.hasDropdown ? (
                <div>
                  <button
                    onClick={() => toggleSubmenu(item.label)}
                    className="w-full flex items-center justify-between px-4 py-3 text-left text-gray-700 hover:bg-gray-50"
                  >
                    <span className="font-medium">{item.label}</span>
                    <svg
                      className={`w-5 h-5 transform transition-transform ${
                        expandedMenu === item.label ? "rotate-180" : ""
                      }`}
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M19 9l-7 7-7-7"
                      />
                    </svg>
                  </button>
                  {expandedMenu === item.label && item.subItems && (
                    <div className="bg-gray-50">
                      {item.subItems.map((subItem) => (
                        <Link
                          key={subItem.label}
                          href={subItem.href}
                          className="block px-8 py-2 text-sm text-gray-600 hover:text-[#0A74B2] hover:bg-white"
                          onClick={onClose}
                        >
                          {subItem.label}
                        </Link>
                      ))}
                    </div>
                  )}
                </div>
              ) : (
                <Link
                  href={item.href}
                  className="block px-4 py-3 text-gray-700 hover:bg-gray-50 font-medium"
                  onClick={onClose}
                >
                  {item.label}
                </Link>
              )}
            </div>
          ))}

          <div className="px-4 py-4">
            <Link
              href="/appointment"
              className="block w-full text-center bg-[#0A74B2] hover:bg-[#085a8f] text-white font-semibold px-6 py-3 rounded-full transition-colors duration-200"
              onClick={onClose}
            >
              Get A Appointment
            </Link>
          </div>
        </div>
      </div>
    </>
  );
};

export default MobileMenu;