import { AnimatePresence, motion } from "motion/react";
import usePopupStore from "../store/popupStore";
import { useEffect } from "react";

function PopupContainer() {
  const { popup } = usePopupStore();

  const isMobile = innerWidth < 640;

  useEffect(() => {
    console.log(popup);
  }, [popup]);

  return (
    <AnimatePresence>
      {popup && (
        <motion.div
          className="fixed bottom-0"
          initial={{ opacity: 0, y: isMobile ? "100%" : undefined }}
          animate={{ opacity: 1, y: isMobile ? "0%" : undefined }}
          exit={{ opacity: 0, y: isMobile ? "100%" : undefined }}
          transition={{ bounce: 0, ease: "easeInOut" }}
        >
          {popup}
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default PopupContainer;