'use client';

import { motion } from 'framer-motion';
import { usePathname } from 'next/navigation';
import { ReactNode, useEffect, useState } from 'react';

interface PageTransitionProps {
  children: ReactNode;
}

export function PageTransition({ children }: PageTransitionProps) {
  const pathname = usePathname();
  const [isFirstRender, setIsFirstRender] = useState(true);

  useEffect(() => {
    const timeout = setTimeout(() => {
      setIsFirstRender(false);
    }, 500);

    return () => clearTimeout(timeout);
  }, []);

  const variants = {
    hidden: { opacity: 0, y: 20 },
    enter: { opacity: 1, y: 0 },
    exit: { opacity: 0, y: -20 },
  };

  // Only apply softer animation on initial render
  const initialAnimation = isFirstRender ? {
    initial: { opacity: 0 },
    animate: { opacity: 1 },
    transition: { duration: 0.5 }
  } : {
    initial: "hidden",
    animate: "enter",
    exit: "exit",
    variants,
    transition: { 
      type: "tween", 
      ease: "easeInOut",
      duration: 0.3
    }
  };

  return (
    <motion.div
      key={pathname}
      {...initialAnimation}
      className="w-full h-full"
    >
      {children}
    </motion.div>
  );
}