"use client";

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

/**
 * Fades/slides a block into place once it scrolls into view (or immediately
 * if it's already on screen at load — e.g. the hero). Pass `delay` (ms) to
 * stage a sequence, and `from` to pick the entry direction.
 *
 * Pure CSS transition under the hood (`.reveal` / `.reveal--in` in
 * globals.css) — this component only toggles the class at the right time,
 * so it stays cheap and respects `prefers-reduced-motion` for free.
 */
export default function Reveal({
  as: Tag = "div",
  from = "up", // "up" | "down" | "left" | "right" | "scale"
  delay = 0,
  once = true,
  className = "",
  style,
  children,
  ...rest
}) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);

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

    if (typeof IntersectionObserver === "undefined") {
      setVisible(true);
      return;
    }

    const io = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          if (entry.isIntersecting) {
            setVisible(true);
            if (once) io.unobserve(entry.target);
          } else if (!once) {
            setVisible(false);
          }
        }
      },
      { threshold: 0.18, rootMargin: "0px 0px -10% 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [once]);

  return (
    <Tag
      ref={ref}
      className={`reveal reveal--${from} ${visible ? "reveal--in" : ""} ${className}`}
      style={{ "--reveal-delay": `${delay}ms`, ...style }}
      {...rest}
    >
      {children}
    </Tag>
  );
}