"use client";

import { motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";

type Props = {
  children: ReactNode;
  index?: number;
  className?: string;
  /** Initial Y offset in px. */
  offset?: number;
  /** Delay step between siblings, in seconds. */
  stagger?: number;
};

/**
 * Lightweight wrapper that fades + slides content in when it scrolls into view.
 * Use it around grid items to get a soft staggered reveal without rewriting the
 * surrounding server component.
 *
 * Honours prefers-reduced-motion by rendering a plain div.
 */
export function MotionReveal({
  children,
  index = 0,
  className,
  offset = 20,
  stagger = 0.07,
}: Props) {
  const shouldReduceMotion = useReducedMotion();

  if (shouldReduceMotion) {
    return <div className={className}>{children}</div>;
  }

  return (
    <motion.div
      className={className}
      initial={{ opacity: 0, y: offset }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, amount: 0.25 }}
      transition={{
        duration: 0.55,
        ease: [0.22, 1, 0.36, 1],
        delay: index * stagger,
      }}
    >
      {children}
    </motion.div>
  );
}
