import { useEffect, useRef, useState } from "react";

export function useCardAnimation() {
  const [mounted, setMounted] = useState(false);
  const isMobile = typeof window !== "undefined" && window.innerWidth < 768;
  const itemRefs = useRef<(HTMLElement | null)[]>([]);
  const bottomContentRef = useRef<HTMLDivElement>(null);
  const containerRef = useRef<HTMLDivElement>(null);
  const perspectiveRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setMounted(true);
  }, []);

  const setItemRef = (index: number, el: HTMLElement | null) => {
    if (!itemRefs.current) {
      itemRefs.current = [];
    }
    itemRefs.current[index] = el;
  };

  return {
    mounted,
    isMobile,
    itemRefs,
    setItemRef,
    bottomContentRef,
    containerRef,
    perspectiveRef,
  };
}
