aragrp/components/motion-reveal.tsx

"use client";

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

import {
  blockRevealContainer,
  blockRevealItem,
  blockViewport,
} from "@/lib/block-motion";
import { cn } from "@/lib/utils";

type MotionRevealProps = {
  children: ReactNode;
  className?: string;
  /** Stagger direct `MotionRevealItem` children (max ~8 for feel). */
  stagger?: boolean;
};

/**
 * Scroll-driven entrance for page blocks.
 * Respects `prefers-reduced-motion` and plays once per view.
 */
export function MotionReveal({
  children,
  className,
  stagger = false,
}: MotionRevealProps) {
  const reduceMotion = useReducedMotion();

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

  return (
    <motion.div
      className={cn(className)}
      initial="hidden"
      whileInView="visible"
      viewport={blockViewport}
      variants={stagger ? blockRevealContainer : blockRevealItem}
    >
      {children}
    </motion.div>
  );
}

type MotionRevealItemProps = {
  children: ReactNode;
  className?: string;
};

/** Child of a staggered `MotionReveal`. No-op when reduced motion is on. */
export function MotionRevealItem({
  children,
  className,
}: MotionRevealItemProps) {
  const reduceMotion = useReducedMotion();

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

  return (
    <motion.div className={cn(className)} variants={blockRevealItem}>
      {children}
    </motion.div>
  );
}