import React from 'react';
import { View, Text } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

import { StatCardProps } from '../types/type';
import Card from '../utils/card';
import { styles } from '../styles/StatCardStyle';



export default function StatCard({
  title,
  icon,
  iconColor,
  value,
  subValue,
  highlightValueColor,
}: StatCardProps) {
  return (
    <Card style={{ flex: 1 }}>

      <View style={styles.header}>
        <Ionicons
          name={icon}
          size={20}
          color={iconColor}
        />

        <Text
          style={[
            styles.title,
            { color: iconColor }
          ]}
        >
          {title}
        </Text>
      </View>

      <View style={styles.valueContainer}>

        <Text
          style={[
            styles.value,
            highlightValueColor && { color: highlightValueColor },
          ]}
        >
          {value}
        </Text>

        {subValue ? (
          <Text style={styles.subValue}>
            {subValue}
          </Text>
        ) : null}

      </View>

    </Card>
  );
}