'use client'

import { useSearchParams, useRouter, usePathname } from 'next/navigation'
import { motion } from 'framer-motion'
import { useState } from 'react'

export default function PageTransitionFromHero({ children }: { children: React.ReactNode }) {
  const searchParams = useSearchParams()
  const router = useRouter()
  const pathname = usePathname()
  const fromHero = searchParams.get('from') === 'hero'
  const [showOverlay, setShowOverlay] = useState(fromHero)

  const handleAnimationComplete = () => {
    setShowOverlay(false)
    if (fromHero) router.replace(pathname)
  }

  return (
    <>
      {showOverlay && (
        <motion.div
          className="pointer-events-none fixed inset-0 z-40 bg-white"
          initial={{ opacity: 1 }}
          animate={{ opacity: 0 }}
          transition={{ duration: 0.9, ease: 'easeOut' }}
          onAnimationComplete={handleAnimationComplete}
        />
      )}
      {children}
    </>
  )
}