import React from 'react';
import { motion } from 'framer-motion';
import { useAnimatedSection } from '@/hooks/useAnimatedSection';

interface AnimatedSectionProps {
  children: React.ReactNode;
  className?: string;
}

const AnimatedSection: React.FC<AnimatedSectionProps> = ({ children, className }) => {
  const { ref, isInView } = useAnimatedSection();

  return (
    <motion.div
      ref={ref}
      initial={{ opacity: 0, y: 50 }}
      animate={isInView ? { opacity: 1, y: 0 } : {}}
      transition={{ duration: 0.6, ease: 'easeOut' }}
      className={`relative ${className || ''}`}
      style={{ position: 'relative' }}
    >
      {children}
    </motion.div>
  );
};

export default AnimatedSection;