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

export default ConnectType = ({type, available, all, color=textPrimary}) => {
  if (type) {
    return (
      <View style={[styles.connectType, {borderColor: color}]}>
        <Text style={[styles.typeLabel, {backgroundColor: color}]}>{type}</Text>
        <Text style={[styles.typeContent, {color: color}]}><Text style={styles.typeBold}>{available}</Text>/{all}</Text>
      </View>
    );
  } else {
    return <></>;
  }
}

const styles = StyleSheet.create({
  connectType: {
    borderWidth: 1,
    borderColor: textPrimary,
    borderRadius: 3,
    marginRight: 16,
    alignItems: 'center',
    flexDirection: 'row',
  },
  typeLabel: {
    color: textLight,
    fontSize: 12,
    paddingTop: 2,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 2,
    backgroundColor: textPrimary
  },
  typeContent: {
    color: textSecondary,
    fontSize: 12,
    paddingLeft: 10,
    paddingRight: 6,
  },
  typeBold: {
    color: textPrimary,
    fontSize: 14,
    fontWeight: 'bold'
  }
})