import React, { useEffect } from 'react';
import { ViewStyle } from 'react-native';
import Animated, {
  useAnimatedStyle,
  useSharedValue,
  withDelay,
  withTiming,
  Easing,
} from 'react-native-reanimated';

interface AnimatedCardProps {
  index?: number;
  delay?: number;
  style?: any;
  children: React.ReactNode;
}

export default function AnimatedCard({ index = 0, delay, style, children }: AnimatedCardProps) {
  const opacity = useSharedValue(0);
  const translateY = useSharedValue(20);

  useEffect(() => {
    const d = delay ?? index * 80;
    opacity.value = withDelay(d, withTiming(1, { duration: 500, easing: Easing.out(Easing.exp) }));
    translateY.value = withDelay(d, withTiming(0, { duration: 500, easing: Easing.out(Easing.exp) }));
  }, []);

  const animatedStyle = useAnimatedStyle(() => ({
    opacity: opacity.value,
    transform: [{ translateY: translateY.value }],
  }));

  return (
    <Animated.View style={[animatedStyle, style]}>
      {children}
    </Animated.View>
  );
}