"use client";

import { useRef } from "react";
import { motion, useReducedMotion, type Variants } from "framer-motion";
import { fadeUp } from "@/lib/animations";

interface AnimateOnScrollProps {
  children: React.ReactNode;
  variant?: Variants;
  delay?: number;
  className?: string;
}

export default function AnimateOnScroll({
  children,
  variant = fadeUp,
  delay = 0,
  className,
}: AnimateOnScrollProps) {
  const prefersReducedMotion = useReducedMotion();
  const ref = useRef(null);

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

  return (
    <motion.div
      ref={ref}
      variants={variant}
      initial="hidden"
      whileInView="visible"
      viewport={{ once: true, amount: 0.2 }}
      transition={{ delay }}
      className={className}
    >
      {children}
    </motion.div>
  );
}
