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

interface AnimatedImageProps {
  children: ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

export function AnimatedImage({ children, className, style }: AnimatedImageProps) {
  const ref = useRef<HTMLDivElement>(null);
  const { reducedMotion } = useMotionContext();
  const isInView = useInView(ref, { once: true, amount: 0.1 });

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

  return (
    <motion.div
      ref={ref}
      className={className}
      style={{ ...style, overflow: "hidden" }}
      initial="hidden"
      animate={isInView ? "visible" : "hidden"}
      variants={IMAGE_VARIANTS}
    >
      {children}
    </motion.div>
  );
}