Fade Blur Reveal

"use client";

import { Children, type ReactNode } from "react";
import { motion, useReducedMotion } from "motion/react";
import { cn } from "@/lib/utils";

export interface FadeBlurRevealProps {
  children: ReactNode;
  /** Reveal each direct child one after the other. */
  stagger?: number;
  delay?: number;
  /** Vertical offset in px. */
  y?: number;
  /** Blur radius in px at the start. */
  blur?: number;
  once?: boolean;
  className?: string;
  /** Class applied to each wrapped child when staggering. */
  itemClassName?: string;
}

const EASE = [0.22, 1, 0.36, 1] as const;

/** Scroll-triggered reveal: opacity 0 → 1, translateY and blur resolve together. */
export function FadeBlurReveal({ children, stagger = 0, delay = 0, y = 8, blur = 6, once = true, className, itemClassName }: FadeBlurRevealProps) {
  const reduce = useReducedMotion();
  const hidden = { opacity: 0, y, filter: `blur(${blur}px)` };
  const shown = { opacity: 1, y: 0, filter: "blur(0px)" };

  if (!stagger) {
    return (
      <motion.div
        className={className}
        initial={reduce ? false : hidden}
        whileInView={shown}
        viewport={{ once, amount: 0.3 }}
        transition={{ duration: 0.6, delay, ease: EASE }}
      >
        {children}
      </motion.div>
    );
  }

  return (
    <motion.div className={className} initial={reduce ? false : "hidden"} whileInView="shown" viewport={{ once, amount: 0.2 }} transition={{ staggerChildren: stagger, delayChildren: delay }}>
      {Children.map(children, (child) => (
        <motion.div className={cn(itemClassName)} variants={{ hidden, shown }} transition={{ duration: 0.6, ease: EASE }}>
          {child}
        </motion.div>
      ))}
    </motion.div>
  );
}

export default FadeBlurReveal;