import React,{Component} from "react"
import {Text,View} from "react-native"
import Icon from "react-native-vector-icons/MaterialIcons";


export default class IconWithBadge extends React.Component {
  render() {
    const { name, badgeCount, color, size } = this.props;
    return (
      <View style={{ width: size*3/2, height: size*3/2, margin: 5 }}>
        <Icon name={name} size={size} color={color} />
        { badgeCount > 0 && (
          <View style={{
            position: 'absolute',
            right: -6,
            top: -3,
            backgroundColor: 'red',
            borderRadius: size*4/5,
            width: size*3/5,
            height: size*3/5,
            justifyContent: 'center',
            alignItems: 'center'
          }}>
            <Text style={{ color: 'white', fontSize: 10, fontWeight: 'bold' }}>{badgeCount}</Text>
          </View>
        )}
      </View>
    );
  }
}