"use client";

import { useEffect } from "react";

export function ScrollRevealController() {
  useEffect(() => {
    let observer: IntersectionObserver | null = null;

    const timer = window.setTimeout(() => {
      const revealItems = Array.from(
        document.querySelectorAll<HTMLElement>("[data-reveal]"),
      );

      if (revealItems.length === 0) {
        return;
      }

      if (!("IntersectionObserver" in window)) {
        for (const item of revealItems) {
          item.dataset.revealVisible = "true";
        }
        return;
      }

      observer = new IntersectionObserver(
        (entries) => {
          for (const entry of entries) {
            if (!entry.isIntersecting) {
              continue;
            }

            const item = entry.target as HTMLElement;
            item.dataset.revealVisible = "true";
            observer?.unobserve(item);
          }
        },
        {
          rootMargin: "0px 0px -12% 0px",
          threshold: 0.16,
        },
      );

      for (const item of revealItems) {
        observer.observe(item);
      }
    }, 80);

    return () => {
      window.clearTimeout(timer);
      observer?.disconnect();
    };
  }, []);

  return <span aria-hidden="true" className="hidden" data-scroll-reveal-controller />;
}