import React from 'react';
import {View, StyleSheet, Text} from 'react-native';
import {Icon} from "native-base";

const IconCard = props => {

    return (
        <View style={styles.card}>
            <View style={{alignItems: 'center', justifyContent: 'center', paddingLeft: 20}}>
                <Icon style={{color: 'white', fontSize: 40}} name={props.iconName} type={props.iconType}/>
                <Text style={{color: 'white', marginTop: 5}}> {props.label}</Text>
            </View>
            <View style={{paddingRight: 20}}>
                <Text style={{color: 'white', fontSize: props.fontSize}}> {props.value}</Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    card : {
        flexDirection: 'row',
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        margin: 5,
        padding: 5,
        borderRadius: 3,
        justifyContent: 'space-between',
    }
});

IconCard.defaultProps =  {
   fontSize: 85
};

export default IconCard;