"use client";

import { useEffect } from "react";

export default function WowObserver() {
  useEffect(() => {
    const els = Array.from(document.querySelectorAll<HTMLElement>(".wow"));
    if (els.length === 0) return;

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (!entry.isIntersecting) return;
          const el = entry.target as HTMLElement;
          el.classList.add("animated");
          el.style.animationDuration = el.dataset.wowDuration || "1000ms";
          el.style.animationDelay = el.dataset.wowDelay || "0ms";
          observer.unobserve(el);
        });
      },
      { threshold: 0.05 }
    );

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

  return null;
}