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

interface MotionSectionProps {
  children: ReactNode;
  className?: string;
  amount?: number;
  staggerDelay?: number;
}

export function MotionSection({
  children,
  className,
  amount = 0.05,
  staggerDelay = 0.07,
}: MotionSectionProps) {
  const ref = useRef<HTMLDivElement>(null);
  const { reducedMotion } = useMotionContext();
  const isInView = useInView(ref, { once: true, amount });

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

  return (
    <motion.div
      ref={ref}
      className={className}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      variants={{
        hidden: {},
        visible: {
          transition: { staggerChildren: staggerDelay, delayChildren: 0.04 },
        },
      }}
    >
      {children}
    </motion.div>
  );
}

/* Wrap each stagger child with this */
export function MotionItem({ children, className }: { children: ReactNode; className?: string }) {
  return (
    <motion.div className={className} variants={LIST_ITEM_VARIANTS}>
      {children}
    </motion.div>
  );
}

export { STAGGER_VARIANTS, LIST_ITEM_VARIANTS };