'use client';
import React, { useRef, useEffect, ReactNode } from 'react';

interface ScrollRevealSectionProps {
  children: ReactNode;
  className?: string;
  delay?: number;
  variant?: 'default' | 'left' | 'scale';
  id?: string;
}

export default function ScrollRevealSection({
  children,
  className = '',
  delay = 0,
  variant = 'default',
  id,
}: ScrollRevealSectionProps) {
  const ref = useRef<HTMLDivElement>(null);

  const variantClass =
    variant === 'left' ?'scroll-reveal-left'
      : variant === 'scale' ?'scroll-reveal-scale' :'scroll-reveal';

  const delayClass = delay > 0 ? `scroll-reveal-delay-${delay}` : '';

  useEffect(() => {
    const el = ref.current;
    if (!el) return;

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          el.classList.add('scroll-revealed');
          observer.unobserve(el);
        }
      },
      { threshold: 0.08, rootMargin: '0px 0px -30px 0px' }
    );

    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return (
    <div ref={ref} id={id} className={`${variantClass} ${delayClass} ${className}`}>
      {children}
    </div>
  );
}
