"use client";
import { motion, useInView } from "framer-motion";
import { useRef, ReactNode } from "react";
import { REVEAL_VARIANTS, T } from "./MotionConfig";
import { useMotionContext } from "./MotionProvider";

type RevealVariant = keyof typeof REVEAL_VARIANTS;

interface RevealOnScrollProps {
  children: ReactNode;
  variant?: RevealVariant;
  delay?: number;
  className?: string;
  amount?: number;
}

export function RevealOnScroll({
  children,
  variant = "fadeUp",
  delay = 0,
  className,
  amount = 0.1,
}: RevealOnScrollProps) {
  const ref = useRef<HTMLDivElement>(null);
  const { reducedMotion } = useMotionContext();
  const isInView = useInView(ref, { once: true, amount });

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

  const v = REVEAL_VARIANTS[variant];

  return (
    <motion.div
      ref={ref}
      className={className}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      variants={{
        hidden: v.hidden,
        visible: {
          ...(v.visible as object),
          transition: { ...T.reveal, delay },
        },
      }}
    >
      {children}
    </motion.div>
  );
}