import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';

const PageTransition = ({ children }) => {
    const location = useLocation();
    const [displayLocation, setDisplayLocation] = useState(location);
    const [transitionStage, setTransitionStage] = useState('fadeIn');

    // Simple Fade In animation on mount/route change
    // Note: For complex exit animations, we'd need a more robust library like framer-motion.
    // Given the constraints and desire for "speed", a quick fade-in is often best.

    return (
        <div
            key={location.pathname}
            className="animate-in fade-in slide-in-from-bottom-4 duration-500 ease-out fill-mode-forwards"
        >
            {children}
        </div>
    );
};

export default PageTransition;