'use client';

import { motion } from 'framer-motion'
import React from 'react'
import BlurredOverlayContainer, { BlurredOverlayContainerProps } from '../overlays/BlurredOverlayContainer'

type Props = {

} & BlurredOverlayContainerProps

function Modal({ visible, onClick, children, ...rest }: Props) {
    return (
        <BlurredOverlayContainer
            visible={visible}
            onClick={onClick}
            inDuration={100}
            outDuration={100}
            outDelay={75}
            {...rest}
        >
            <div className="absolute top-1/2 left-6 right-6 px-6">
                <motion.div
                    animate={{ y: visible ? [10, 0] : [0, 10] }}
                    transition={{ duration: 0.1, ease: 'easeInOut' }}
                    className="top-1/2 absolute left-1/2 min-w-xs w-full max-w-sm text-center -translate-1/2 px-6 pt-8 pb-9 drop-shadow-container bg-container/63 dark:bg-container/93 rounded-4xl"
                >
                    {children}
                </motion.div>
            </div>
        </BlurredOverlayContainer>
    )
}

export default Modal