"use client"

import React, { FC, ReactNode, useEffect, useRef, useState } from 'react';

interface RevealOnceProps {
  children: ReactNode;
}

const RevealOnce: FC<RevealOnceProps> = ({ children }) => {
  const ref = useRef<HTMLDivElement>(null);
  const [hasAnimated, setHasAnimated] = useState(false);

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        const [entry] = entries;
        if (entry.isIntersecting && !hasAnimated) {
          animateIn();
          setHasAnimated(true);
          observer.unobserve(entry.target);
        }
      },
      { rootMargin: "0px", threshold: 0.2 }
    );

    const element = ref.current;

    if (element) {
      observer.observe(element);
    }

    return () => {
      if (element) {
        observer.unobserve(element);
      }
    };
  }, [hasAnimated]);

  const animateIn = () => {
    const element = ref.current;

    if (element) {
      element.style.opacity = "1";
      element.style.transform = "translateY(0)";
      element.style.transition = "opacity 1.2s, transform 1.2s";
    }
  };

  return (
    <div ref={ref} style={{ opacity: 0, transform: "translateY(40px)" }}>
      {children}
    </div>
  );
};

export default RevealOnce;

This causes around a 5 second increase in LCP when measured in pagespeed.web.dev