import Modal from '@/components/animations/modal'
import React from 'react'

const AnimatePresence = () => {
  return (
    <div className="p-5">
   
        <div className='w-full h-full relative flex flex-col items-center'>
            <Modal refresh initial={0} animate={1} exit={0} isVisible={true}>
                <div className="w-52 h-52 rounded-md from-black to-zinc-600 text-white bg-gradient-to-t" >
                    <Rotating refresh rotate={[0, 90, 180, 270, 360]} transition={{duration:2, repeat:Infinity}}>
                        <div className='w-20 h-20 rounded-xl from-red-500 via-orange-500 to-yellow-500 bg-gradient-to-tr'></div>
                    </Rotating>
                </div>
            </Modal>
        </div>
        
    </div>
  )
}

export default AnimatePresence


"use client"
import { AnimatePresence, motion } from "framer-motion";
import { Preview } from "../common/display";
import {  useState } from "react";
import { Button } from "../ui/button";

interface ModalProps {
    children: React.ReactNode;
    initial: number;
    animate: number;
    exit: number;
    isVisible: boolean;
    refresh:boolean;
}

const Modal = ({ children, animate, exit, initial, refresh }: ModalProps) => {
    const [count, setCount] = useState(0);

    const [open, setOpen] = useState(false);

    const handleOpen = () => {
        setOpen((prev)=>!prev);
    }

    return (
        <Preview SetCount={setCount} isRefreshing={refresh} animeName='Model'>
            <AnimatePresence key={count}>
                {open && (
                    <motion.div
                        initial={{ opacity: initial }}
                        animate={{ opacity: animate }}
                        exit={{ opacity: exit }}
                    >
                        {children}
                    </motion.div>
                )}
                <Button onClick={handleOpen} className='absolute bottom-[40px] hover:text-white dark:hover:text-black text-black bg-white drop-shadow-md'>{open?"Close":"Open"}</Button>
            </AnimatePresence>
        </Preview>
    );
}

export default Modal;


interface PreviewerProps {
    children: React.ReactNode;
    SetCount: (count: number) => void;
    isRefreshing: boolean;
    animeName:string
    hideIcon?: boolean;
}
export const Preview = ({ children, SetCount, isRefreshing, animeName, hideIcon=false }: PreviewerProps) => {
    const [count, setCount] = useState(0);
    const [isLoading, setIsLoading] = useState(false);

    const handleClick = () => {
        setIsLoading(true);
        setCount(count + 1);

        SetCount(count + 1);

        setTimeout(() => {
            setIsLoading(false);
        }, 400); // Timeout duration matches the animation duration
    };
    return (
        <div className="w-full h-full flex flex-col">
            <div className="w-full flex-1 flex justify-center items-center">
            {children}
            </div>

            {isRefreshing &&
                <div  className="h-[50px] w-full px-6 rounded-b-[24px] flex justify-between">
                    <span>{animeName}</span>{!hideIcon && <RotateCw onClick={handleClick} className={isLoading ? 'animate-spin duration-200' : 'animate-none'} />}
                </div>
            }
        </div>
    )
};