'use client'

import clsx from 'clsx'
import { AnimatePresence, motion } from 'framer-motion'
import { usePathname } from 'next/navigation'
import React from 'react'

type Props = {
  children: React.ReactNode
  className?: string
}

function ClientSideWrapper({ children, className = 'h-full' }: Props) {
  const pathname = usePathname()

  return (
    <AnimatePresence mode="wait">
      <motion.div
        key={pathname} 
        initial={{ opacity: 0, y: -10, }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: 0, transition: { duration: 0 } }}
        transition={{ duration: 0.3 }}
        className={clsx(className)}
      >
        {children}
      </motion.div>
    </AnimatePresence>
  )
}

export default ClientSideWrapper
