import React from 'react';
import { View, Text } from 'react-native';
import { Icon } from 'react-native-elements';

const InfoBar = ({ numOfContacts, numOfRecs }) => (
  <View style={{ flexDirection: 'row', borderWidth: 0.5, borderColor: '#E0E3EF' }}>
    <View style={{ flex: 2, alignItems: 'flex-start', paddingVertical: 10, paddingLeft: 5, borderWidth: 0.5, borderColor: '#E0E3EF' }}>
      <View style={{ flexDirection: 'row' }}>
        <Icon name='star-circle' type='material-community' color='#FFD166' size={17} />
        <Text style={{ marginLeft: 3 }}>Tagfer Top Networker</Text>
      </View>
      <View style={{ flexDirection: 'row' }}>
        <Icon name='md-ribbon' type='ionicon' color='#36CCDA' size={20} />
        <Text style={{ marginLeft: 5 }}>{numOfRecs} Recommendations</Text>
      </View>
    </View>

    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', borderWidth: 0.5, borderColor: '#E0E3EF', paddingVertical: 10 }}>
      <Text style={{ fontSize: 18, fontWeight: '600' }}>{numOfContacts}</Text>
      <Text style={{ fontSize: 15, color: '#535353' }}>Contacts</Text>
    </View>
  </View>
);

export default InfoBar;
