import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useTheme } from '../../theme';
import { getStyles } from './statCard.styles';
import { StatCardProps } from './statCard.props';

export const StatCard: React.FC<StatCardProps> = ({
  label,
  count,
  color,
  isSelected = false,
  onPress,
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const themeColor = color || colors.icon;
  const borderColor = isSelected ? themeColor : colors.border;

  return (
    <TouchableOpacity
      activeOpacity={onPress ? 0.8 : 1}
      onPress={onPress}
      style={[
        styles.card,
        { borderColor },
        isSelected && styles.cardSelected,
      ]}
    >
      {/* Top Status Pill Tag */}
      <View
        style={[
          styles.pillTag,
          isSelected
            ? { backgroundColor: themeColor }
            : styles.pillTagInactive,
        ]}
      >
        <View
          style={[
            styles.statusDot,
            { backgroundColor: isSelected ? '#FFFFFF' : themeColor },
          ]}
        />
        <Text
          style={[
            styles.labelText,
            { color: isSelected ? '#FFFFFF' : colors.textSecondary },
          ]}
          numberOfLines={1}
        >
          {label}
        </Text>
      </View>

      {/* Large Metric Count */}
      <Text
        style={[
          styles.countText,
          { color: isSelected ? themeColor : colors.text },
        ]}
      >
        {count}
      </Text>
    </TouchableOpacity>
  );
};