import { useEffect, useRef } from "react";

export interface UseCardAnimationOptions {
  animationType?: "opacity" | "none" | "slide-up" | "blur-reveal";
  staggerDelay?: number;
  duration?: number;
}

export const useCardAnimation = (options: UseCardAnimationOptions = {}) => {
  const { animationType = "opacity", staggerDelay = 0.1, duration = 0.6 } =
    options;
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current || animationType === "none") return;

    const cards = containerRef.current.querySelectorAll("[data-card]");
    if (cards.length === 0) return;

    cards.forEach((card, index) => {
      const element = card as HTMLElement;
      element.style.opacity = "0";

      const delay = index * staggerDelay;
      setTimeout(() => {
        element.style.transition = `opacity ${duration}s ease-in-out`;
        element.style.opacity = "1";
      }, delay * 1000);
    });
  }, [animationType, staggerDelay, duration]);

  return {
    containerRef,
  };
};