Framer Modal

'use client'

import { AnimatePresence, motion } from 'framer-motion'
import { Sparkles } from 'lucide-react'

export const ModalFramer = ({
    isOpen,
    setIsOpen
}: {
    isOpen: boolean
    setIsOpen: (isOpen: boolean) => void
}) => {
    return (
        <AnimatePresence>
            {isOpen && (
                <motion.div
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    onClick={() => setIsOpen(false)}
                    className="bg-slate-900/10 backdrop-blur p-8 fixed inset-0 z-50 grid place-items-center overflow-y-scroll">
                    <motion.div
                        initial={{ scale: 0, rotate: '7.5deg' }}
                        animate={{ scale: 1, rotate: '0deg' }}
                        exit={{ scale: 0, rotate: '0deg' }}
                        transition={{
                            type: 'spring',
                            stiffness: 200,
                            damping: 20,
                            duration: 0.05
                        }}
                        onClick={(e) => e.stopPropagation()}
                        className="bg-white text-black p-6 rounded-lg w-full max-w-lg shadow-white shadow-sm cursor-default relative overflow-hidden">
                        <Sparkles className="text-white/10 rotate-12 text-[250px] absolute z-0 -top-24 -left-24" />
                        <div className="relative z-10">
                            <div className="bg-gray-100 w-16 h-16 mb-2 rounded-full text-3xl text-black grid place-items-center mx-auto">
                                <Sparkles />
                            </div>
                            <h3 className="text-3xl font-bold text-center mb-2">Framer Modal</h3>
                            <p className="text-center mb-6">
                                A simple modal using Framer Motion, featuring smooth animations and
                                transitions for an engaging slide experience
                            </p>
                            <div className="flex gap-2">
                                <button
                                    onClick={() => setIsOpen(false)}
                                    className=" text-gray-400 w-full py-2">
                                    Maybe later
                                </button>
                                <button
                                    onClick={() => setIsOpen(false)}
                                    className="text-black w-full py-2">
                                    Amazing!
                                </button>
                            </div>
                        </div>
                    </motion.div>
                </motion.div>
            )}
        </AnimatePresence>
    )
}