import type { ReactNode } from "react";
import { AnimatePresence, motion } from "motion/react";

import SectionSurface from "../../surface/SectionSurface/SectionSurface";
import classes from "./Modal.module.css";

type Props = {
  open: boolean;
  children: ReactNode;
  onClose: () => void;
};

export default function Modal({ open, children, onClose }: Props) {
  return (
    <AnimatePresence>
      {open && (
        <motion.div
          className={classes.overlay}
          initial={{ backdropFilter: "blur(0px)" }}
          animate={{ backdropFilter: "blur(8px)" }}
          exit={{ backdropFilter: "blur(0px)" }}
          transition={{ duration: 0.2 }}
          onClick={onClose}
        >
          <SectionSurface
            className={classes.modal}
            exit={{ scale: 0 }}
            transition={{ duration: 0.2, type: "spring" }}
            onClick={(e) => e.stopPropagation()}
          >
            {children}
          </SectionSurface>
        </motion.div>
      )}
    </AnimatePresence>
  );
}
