import {  NAV_ITEMS, NavItem } from "@/constants/menu";
import { useSheet } from "@/lib/hooks/use-sheet";
import { ChevronDown } from "lucide-react";
import Link from "next/link";
import { useState } from "react";
import clsx from "clsx";

const MobileMenu = () => {
  const { onClose } = useSheet();
  return (
    <div className="space-y-20 flex flex-col h-[70vh] justify-between text-colour-2 mt-10">
      <div className="flex flex-col gap-5">
        {NAV_ITEMS.map((item, idx) => (
          <div key={item.title + idx}>
            {item.submenu ? (
              <MenuItemWithSubMenu item={item} />
            ) : (
              <Link onClick={onClose} href={item.path}>
                <div className="flex items-center gap-3 text-lg font-semibold">
                  {item.icon}
                  <span>{item.title}</span>
                </div>
              </Link>
            )}
          </div>
        ))}
      </div>
      <div className="flex justify-center">
        <Link onClick={onClose} className="bg-colour-1 text-white px-7 font-semibold py-3" href="/donate">Donate</Link>
      </div>
      
    </div>
  );
};

export default MobileMenu;

type MenuItemWithSubMenuProps = {
  item: NavItem;
};

const MenuItemWithSubMenu: React.FC<MenuItemWithSubMenuProps> = ({ item }) => {
  const [subMenuOpen, setSubMenuOpen] = useState(false);
  return (
    <>
      <button className="w-full" onClick={() => setSubMenuOpen(!subMenuOpen)}>
        <div className="flex justify-between items-center">
          <span className="flex gap-3 items-center text-lg font-semibold">
            {item.icon}
            {item.title}
          </span>
          <ChevronDown className={clsx("transition-transform duration-300", subMenuOpen && "rotate-180")} />
        </div>
      </button>
      <div
        className={clsx(
          "overflow-hidden transition-all duration-300 ease-in-out",
          subMenuOpen ? "max-h-screen mt-4 pt-5 border-t-2 text-light-3 pl-5 text-lg space-y-3 flex flex-col" : "flex flex-col max-h-0"
        )}
      >
        {item.submenuItems?.map((subItem, subIdx) => (
          <a key={subIdx} href={subItem.path}>
            {subItem.title}
          </a>
        ))}
      </div>
    </>
  );
};