import React from 'react';
import { View, Text, StyleSheet, useColorScheme } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { Colors, Shadows } from '@/constants/theme';
import Animated, { FadeInDown } from 'react-native-reanimated';
import { LinearGradient } from 'expo-linear-gradient';

interface StatCardProps {
  label: string;
  value: string | number;
  icon: keyof typeof Ionicons.glyphMap;
  index?: number;
  isPrimary?: boolean;
}

export default function StatCard({ label, value, icon, index = 0, isPrimary = true }: StatCardProps) {
  const colorScheme = useColorScheme() ?? 'light';
  const theme = Colors[colorScheme as 'light' | 'dark'];

  const gradientColors = (isPrimary ? theme.gradients.primary : theme.gradients.card) as [string, string];
  const textColor = isPrimary ? '#FFF' : theme.text;
  const labelColor = isPrimary ? 'rgba(255,255,255,0.8)' : theme.textMuted;
  const iconColor = isPrimary ? '#FFF' : theme.primary;
  const iconBgColor = isPrimary ? 'rgba(255,255,255,0.2)' : theme.secondary;

  return (
    <Animated.View 
      entering={FadeInDown.duration(400).delay(index * 150)}
      style={[styles.container, Shadows.soft, { width: '48%' }]}
    >
      <LinearGradient
        colors={gradientColors}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.card}
      >
        <View style={[styles.iconContainer, { backgroundColor: iconBgColor }]}>
          <Ionicons name={icon} size={22} color={iconColor} />
        </View>
        <View style={styles.content}>
          <Text style={[styles.value, { color: textColor }]} numberOfLines={1} adjustsFontSizeToFit>{value}</Text>
          <Text style={[styles.label, { color: labelColor }]} numberOfLines={1}>{label}</Text>
        </View>
      </LinearGradient>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 16,
    borderRadius: 20,
  },
  card: {
    padding: 18,
    borderRadius: 20,
    minHeight: 120,
    justifyContent: 'space-between',
  },
  iconContainer: {
    width: 42,
    height: 42,
    borderRadius: 21,
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 12,
  },
  content: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  label: {
    fontSize: 13,
    fontWeight: '500',
    marginTop: 4,
  },
  value: {
    fontSize: 24,
    fontWeight: '800',
    letterSpacing: -0.5,
  },
});