import { AnimatePresence, motion } from 'framer-motion';
import { usePage } from '@inertiajs/react';
import React from 'react';

export default function GlobalTransition({ children }: { children: React.ReactNode }) {
    const { component } = usePage();

    const isAuthPage = component.startsWith('auth/');

    return (
        <AnimatePresence mode="wait">
            <motion.div
                key={component}
                initial={{ opacity: 1 }}
                animate={{ opacity: 1 }}
                exit={isAuthPage ? { opacity: 0, scale: 0.9, filter: 'blur(10px)' } : { opacity: 1 }}
                transition={isAuthPage ? { duration: 0.5, ease: [0.22, 1, 0.36, 1] } : { duration: 0 }}
                className="w-full h-full min-h-dvh flex flex-col"
            >
                {children}
            </motion.div>
        </AnimatePresence>
    );
}