Update src/components/cardStack/hooks/useCardAnimation.ts

src/components/cardStack/hooks/useCardAnimation.ts

@@ -1,37 +1,33 @@
-import { useEffect, useState } from "react";
+import { RefObject, useCallback, useRef } from 'react';
 
-interface UseCardAnimationProps {
-  containerRef: React.RefObject<HTMLDivElement>;
-  cardsOffset?: number;
-  scaleFactor?: number;
-  rotationFactor?: number;
-  animationDuration?: number;
+export type CardAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
+export type BentoAnimationType = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal';
+export type CardAnimationTypeWith3D = 'none' | 'opacity' | 'slide-up' | 'scale-rotate' | 'blur-reveal' | 'depth-3d';
+
+export interface UseCardAnimationProps {
+  itemRefs?: RefObject<HTMLDivElement>[];
+  containerRef?: RefObject<HTMLDivElement>;
+  perspectiveRef?: RefObject<HTMLDivElement>;
+  bottomContentRef?: RefObject<HTMLDivElement>;
 }
 
-interface AnimationState {
-  transform: string;
-}
+export const useCardAnimation = (
+  props: UseCardAnimationProps
+) => {
+  const refs = useRef<{ transform: string }>({
+    transform: 'none',
+  });
 
-export const useCardAnimation = ({
-  containerRef,
-  cardsOffset = 10,
-  scaleFactor = 0.08,
-  rotationFactor = 5,
-  animationDuration = 500,
-}: UseCardAnimationProps) => {
-  const [transform, setTransform] = useState<string>("");
+  const updateAnimation = useCallback(() => {
+    // Animation logic here
+  }, []);
 
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const calculateDepth = (index: number, total: number): number => {
-      return index;
-    };
-
-    // Animation logic can be added here
-    setTransform("");
-  }, [containerRef, cardsOffset, scaleFactor, rotationFactor, animationDuration]);
-
-  return { transform };
+  return {
+    ...refs.current,
+    itemRefs: props.itemRefs,
+    containerRef: props.containerRef,
+    perspectiveRef: props.perspectiveRef,
+    bottomContentRef: props.bottomContentRef,
+    updateAnimation,
+  };
 };