import React, { useRef, ReactNode } from 'react';
import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';

interface ScrollRevealProps {
  children: ReactNode;
  animation?: 'fade-in-up' | 'fade-in-left' | 'fade-in-right' | 'scale-in' | 'fade-in';
  delay?: number;
  className?: string;
  threshold?: number;
}

const ScrollReveal = ({ 
  children, 
  animation = 'fade-in-up', 
  delay = 0, 
  className = '',
  threshold = 0.1
}: ScrollRevealProps) => {
  const ref = useRef<HTMLDivElement>(null);
  const entry = useIntersectionObserver(ref, { 
    threshold, 
    freezeOnceVisible: true 
  });
  
  const isVisible = !!entry?.isIntersecting;

  const animationClass = isVisible ? `animate-${animation}` : 'opacity-0';
  
  return (
    <div 
      ref={ref} 
      className={`${animationClass} ${className}`}
      style={{ 
        animationDelay: `${delay}ms`,
        animationFillMode: 'forwards'
      }}
    >
      {children}
    </div>
  );
};

export default ScrollReveal;
