Untitled

import { cn, modalZIndex } from "@/_utils/utils";
import { AnimatePresence, motion, MotionProps } from "framer-motion";
import React, { PropsWithChildren } from "react";
import ReactModal from "react-modal";

type PopupPageProps = {
  isOpen: boolean;
  onClose: () => void;
} & PropsWithChildren;

export function PopupPage({ isOpen, onClose, children }: PopupPageProps) {
  return (
    <ReactModal
      isOpen={isOpen}
      closeTimeoutMS={300}
      onRequestClose={onClose}
      overlayClassName={`${modalZIndex} bg-black/20 fixed inset-0`}
      overlayElement={(props, children) => (
        <AnimatePresence>
          {isOpen && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 100 }}
              exit={{ opacity: 0 }}
              data-testid="modal-overlay"
              {...(props as MotionProps)}
            >
              {children}
            </motion.div>
          )}
        </AnimatePresence>
      )}
      className={cn(
        "absolute inset-x-0 bottom-0 top-8 mx-auto max-w-screen-md rounded-t-2xl bg-white p-4 outline-none",
        "max-sm:[--transform-from:translateY(10%)] max-sm:[--transform-to:translateY(0%)]",
        "sm:[--transform-from:scale(90%)] sm:[--transform-to:scale(100%)]",
        "sm:inset-12 sm:rounded-2xl sm:p-6 sm:shadow-lg",
      )}
      contentElement={(props, children) => (
        <motion.div
          initial={{ opacity: 0, transform: "var(--transform-from)" }}
          animate={{ opacity: 100, transform: "var(--transform-to)" }}
          exit={{ opacity: 0, transform: "var(--transform-from)" }}
          {...(props as MotionProps)}
        >
          {children}
        </motion.div>
      )}
    >
      {children}
    </ReactModal>
  );
}