import { useEffect, useRef } from 'react';
import { useAnimation, useInView } from 'framer-motion';
import { debouncedAnimation } from '../utils/performance';

export const useInViewAnimation = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true });
  const controls = useAnimation();

  useEffect(() => {
    if (isInView) {
      debouncedAnimation(() => {
        controls.start("visible");
      });
    }
  }, [isInView, controls]);

  return { ref, controls };
};