import { PropsWithChildren } from "react"
import { motion } from "framer-motion"

export const AuthTransitionPages = ({ children }: PropsWithChildren) => {
    const animations = {
        initial: {
            opacity: 0,
            scale: 0.95,
            transition: {
                duration: 0.5,
                ease: "easeIn"
            }
        },
        animate: {
            opacity: 1,
            scale: 1,
            transition: {
                duration: 0.5,
                ease: "easeOut"
            }
        },
        exit: {
            opacity: 0,
            scale: 0.95,
            transition: {
                duration: 0.2,
                ease: "easeIn"
            }
        }
    }
    return (
        <motion.div variants={animations} initial="initial" animate="animate" exit="exit" className="flex flex-row min-h-screen p-5 justify-center items-center xl:justify-stretch xl:items-stretch max-h-[750px] overflow-y-hidden relative">
            {children}
        </motion.div>
    )
}