import { ThemedText } from '@/components/themed-text';
import { useEffect } from 'react';
import { Animated, View } from 'react-native';
import { styles } from '../styles/welcomeStyle';

export default function FeatureCard({
  icon,
  title,
  desc,
  delay,
  bgColor,
}: {
  icon: any;
  title: string;
  bgColor: string;
  desc: string;
  delay: number;
}) {
  const fadeAnim = new Animated.Value(0);
  const slideAnim = new Animated.Value(30);

  useEffect(() => {
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 600,
        delay: delay,
        useNativeDriver: true,
      }),
      Animated.timing(slideAnim, {
        toValue: 0,
        duration: 600,
        delay: delay,
        useNativeDriver: true,
      }),
    ]).start();
  }, []);

  return (
    <Animated.View
      style={[
        styles.card,
        {
          opacity: fadeAnim,
          transform: [{ translateY: slideAnim }],
        },
      ]}
    >
      <View style={{ ...styles.cardIcon, backgroundColor: bgColor, borderRadius: 12 }}>
        <ThemedText style={styles.cardIconText}>{icon}</ThemedText>
      </View>
      <ThemedText style={styles.cardTitle}>{title}</ThemedText>
      <ThemedText style={styles.cardDesc}>{desc}</ThemedText>
    </Animated.View>
  );
}