'use client'

import { useRef } from 'react'
import { motion, useInView } from 'framer-motion'

export function AnimatedSection({ children }: { children: React.ReactNode }) {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: false, margin: '-50% 0px -50% 0px' })

  return (
    <motion.section
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={{
        opacity: isInView ? 1 : 0,
        y: isInView ? 0 : 50,
      }}
      transition={{ duration: 0.5 }}
    >
      {children}
    </motion.section>
  )
}