majd-trading/src/components/Reveal.tsx

"use client";

import { useEffect, useRef, useState, type ReactNode } from "react";

type RevealTag = "div" | "li" | "article" | "section";

/**
 * Fades and lifts its content into place the first time it scrolls into view.
 * Pass an increasing `delay` across a list to stagger the sequence.
 *
 * Renders as whatever element the slot needs (`li` inside a list, `article` in a
 * grid) so it never introduces a wrapper that would break list semantics or grid
 * placement. Honours `prefers-reduced-motion` by showing content immediately.
 *
 * The starting state is hidden, so every instance carries `data-reveal` and the
 * layout ships a `<noscript>` rule that forces those elements visible. Without
 * it, a visitor with JS disabled would get a page of blank sections.
 */
export default function Reveal({
  children,
  as = "div",
  delay = 0,
  className = "",
  id,
}: {
  children: ReactNode;
  as?: RevealTag;
  delay?: number;
  className?: string;
  id?: string;
}) {
  const ref = useRef<HTMLElement>(null);
  const [shown, setShown] = useState(false);

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

    // Show immediately when the animation should not or cannot run.
    if (
      !("IntersectionObserver" in window) ||
      window.matchMedia("(prefers-reduced-motion: reduce)").matches
    ) {
      setShown(true);
      return;
    }

    const observer = new IntersectionObserver(
      ([entry]) => {
        if (!entry.isIntersecting) return;
        setShown(true);
        observer.disconnect();
      },
      { threshold: 0.12, rootMargin: "0px 0px -8% 0px" }
    );

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

  const Tag = as;

  return (
    <Tag
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      ref={ref as any}
      id={id}
      data-reveal=""
      style={{ transitionDelay: shown ? `${delay}ms` : "0ms" }}
      className={`transition-[opacity,transform] duration-700 ease-out ${
        shown ? "translate-y-0 opacity-100" : "translate-y-8 opacity-0"
      } ${className}`}
    >
      {children}
    </Tag>
  );
}