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

export function AnimatedSection({ children, id }: { children: React.ReactNode; id?: string }) {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true, margin: '-20% 0px -20% 0px' })

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