import React, { ReactNode } from 'react';
import { useInView } from 'react-intersection-observer';

interface FadeInProps {
  children: ReactNode;
  delay?: number;
  className?: string;
  threshold?: number;
}

const FadeIn: React.FC<FadeInProps> = ({ children, delay = 0, className = '', threshold = 0.1 }) => {
  const { ref, inView } = useInView({
    triggerOnce: true, // Animate only once
    threshold: threshold, // Trigger when 10% of the element is visible
  });

  return (
    <div
      ref={ref}
      className={`transition-all duration-700 ease-out ${className} ${
        inView ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-8'
      }`}
      style={{ transitionDelay: `${delay}ms` }}
    >
      {children}
    </div>
  );
};

export default FadeIn;