import { m } from "framer-motion";
import type { ReactNode } from "react";
import { fadeInUp } from "./variants";

type RevealProps = {
  children: ReactNode;
  /** Per-item delay in seconds (e.g. index * 0.06 for a staggered list). */
  delay?: number;
  className?: string;
  /** Only animate the first time it enters the viewport. */
  once?: boolean;
  /** Fraction of the element that must be visible to trigger (0-1). */
  amount?: number;
  /**
   * Root margin for the in-view trigger (same semantics as IntersectionObserver
   * `rootMargin`). The default positive bottom value reveals each block ~300px
   * *before* it scrolls into view, so long feeds never show a blank gap that
   * reads as "the bottom" before content fades in.
   */
  margin?: string;
};

/**
 * Fade + lift a block in as it scrolls into view. Uses framer's `whileInView`,
 * so it respects the global `reducedMotion="user"` config from MotionProvider
 * (no manual guard needed). Pass an incremental `delay` for simple stagger.
 */
export function Reveal({
  children,
  delay = 0,
  className,
  once = true,
  amount = 0.15,
  margin = "0px 0px 300px 0px",
}: RevealProps) {
  return (
    <m.div
      className={className}
      variants={fadeInUp}
      custom={delay}
      initial="hidden"
      whileInView="visible"
      viewport={{ once, amount, margin }}
    >
      {children}
    </m.div>
  );
}
