"use client";

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

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

const NavigationMenu = () => {
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
  const [active, setActive] = useState<string>("");
  const pathname = usePathname();
  console.log(pathname);

  useEffect(() => {
    setActive(pathname);
  }, [pathname]);

  // Function to check if a menu item is active

  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 SERVICES",
      href: "/services",
      hasDropdown: true,
      subItems: [
        { label: "Passenger Ticketing", href: "/services/#services" },
        { label: "Visa Assistance", href: "/services/#services" },
        { label: "Tour Packages", href: "/services/#services" },
        { label: "Hotel Booking", href: "/services/#services" },
        { label: "Air Cargo", href: "/services/#services" },
        { label: "GSA Handling", href: "/services/#services" },
      ],
    },
    { label: "CONTACT US", href: "/contact" },
  ];

  const handleMouseEnter = (label: string) => {
    setActiveDropdown(label);
  };

  const handleMouseLeave = () => {
    setActiveDropdown(null);
  };
  console.log(active);

  return (
    <nav className="hidden lg:flex items-center space-x-4 font-semibold">
      {menuItems.map((item) => (
        <div
          key={item.label}
          className="relative group"
          onMouseEnter={() => item.hasDropdown && handleMouseEnter(item.label)}
          onMouseLeave={handleMouseLeave}
        >
          <Link
            href={item.href}
            className={`text-black hover:text-[#0A74B2] font-semibold  text-sm transition-colors duration-200 flex items-center ${
              item.href === active && "!text-[#0A74B2]"
            }`}
          >
            {item.label}
            {item.hasDropdown && (
              <svg
                className="ml-1 w-4 h-4 transform transition-transform duration-200"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            )}
          </Link>

          {/* Dropdown Menu */}
          {item.hasDropdown && item.subItems && (
            <div
              className={`absolute top-full left-0 mt-2 w-48 bg-white rounded-lg shadow-lg border transition-all duration-200 ${
                activeDropdown === item.label
                  ? "opacity-100 visible transform translate-y-0"
                  : "opacity-0 invisible transform -translate-y-2"
              }`}
            >
              <div className="py-2">
                {item.subItems.map((subItem) => (
                  <Link
                    key={subItem.label}
                    href={subItem.href}
                    className="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-[#0A74B2] transition-colors duration-150"
                  >
                    {subItem.label}
                  </Link>
                ))}
              </div>
            </div>
          )}
        </div>
      ))}
    </nav>
  );
};

export default NavigationMenu;