import { Dispatch, SetStateAction } from "react";
import { AnimatePresence, motion } from "motion/react";
import { NavLinks } from "./";
import Logo from "@/components/ui/logo";

type MobileMenuProps = {
  isOpen: boolean;
  setMenuOpen: Dispatch<SetStateAction<boolean>>;
};

const NavMobileMenu = ({ isOpen, setMenuOpen }: MobileMenuProps) => {
  return (
    <AnimatePresence>
      {isOpen && (
        <div id="mobile-menu" role="menu" className="md:hidden absolute w-full h-svh top-0 left-0 overflow-hidden">
          <div className="px-4 pt-5 pb-4 relative z-10 space-y-10">
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1, transition: { duration: 0.5, delay: 0.5 } }}
              exit={{ opacity: 0 }}
            >
              <Logo color="#7f0689" />
            </motion.div>
            <NavLinks direction="vertical" animate onClick={() => setMenuOpen(false)} />
          </div>
          <motion.div
            className="rounded-full aspect-square size-8 absolute top-[2.125rem] right-3 bg-contigo-verde"
            initial={{ scale: 0 }}
            animate={{ scale: 125 }}
            exit={{ scale: 0, transition: { delay: 0.3 } }}
            transition={{ duration: 0.75 }}
          />
        </div>
      )}
    </AnimatePresence>
  );
};

export default NavMobileMenu;