import { MENU } from "@/constants/Navigation";
import MobileMenuItem from "./MobileMenuItem";
import { motion, AnimatePresence } from "framer-motion";
import Link from "next/link";

export default function MobileView({
    topics,
    open,
    setMobileOpen,
    activeMenu,
    openMenu,
    setOpenMenu,
    setComingSoonOpen
}) {
    if (!open) return null;

    return (
        <AnimatePresence>
            {open && (
                <>
                    <motion.div
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        exit={{ opacity: 0 }}
                        className="fixed inset-0 z-40 bg-black/10"
                        onClick={() => { setOpenMenu(null); setMobileOpen(false); }}
                    />
                    <motion.div
                        initial={{ opacity: 0, y: -8 }}
                        animate={{ opacity: 1, y: 0 }}
                        exit={{ opacity: 0, y: -8 }}
                        onClick={(e) => e.stopPropagation()}
                        className="relative z-50 mt-3 mx-4 sm:mx-6 rounded-xl bg-white lg:hidden shadow-lg" >
                        <ul className="divide-y">
                            {MENU.filter(item => !item.comingSoon).map(item => (
                                <MobileMenuItem
                                    key={item.name}
                                    item={item}
                                    topics={topics}
                                    activeMenu={activeMenu}
                                    openMenu={openMenu}
                                    setOpenMenu={setOpenMenu}
                                    setComingSoonOpen={setComingSoonOpen}
                                    closeMenu={() => setMobileOpen(false)}
                                />
                            ))}
                            <div className="flex justify-center gap-6 py-4">
                                <button
                                    onClick={() => {
                                        setComingSoonOpen(true);
                                        setMobileOpen(false);
                                    }}
                                    className="px-5 py-2 rounded-xl
                                        border border-[#142a4f]
                                        text-[#142a4f]
                                        hover:bg-[#142a4f] hover:text-white
                                        transition-all duration-200 cursor-pointer
                                    "
                                >
                                    SG8 Clean
                                </button>
                                <Link href="/info" className="px-5 py-2 rounded-xl bg-[#142a4f] text-white hover:bg-gray-800 transition cursor-pointer">
                                    Contact Us
                                </Link>
                            </div>
                        </ul>
                    </motion.div>
                </>
            )}
        </AnimatePresence>
    );
}