import React from 'react';
import { Text, View } from 'react-native';
import { Icon } from 'react-native-elements';
import colors from '../../config/colors.json';

const Keyword = ({ title, onPressX, displayX }) => {
  const keywordStyle = styles.row;

  if (displayX) {
    return (
      <View style={[styles.keywordViewStyle, keywordStyle]}>
        <Text style={styles.keywordTextStyle}>{title}</Text>
        <Icon
          name='cancel'
          onPress={onPressX}
        />
      </View>
    );
  }
  return (
    <View style={[styles.keywordViewStyle, keywordStyle]}>
      <Text style={styles.keywordTextStyle}>{title}</Text>
    </View>
  );
};

const styles = {
  keywordViewStyle: {
    flexDirection: 'row',
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 10,
    paddingRight: 5,
    margin: 5,
    borderWidth: 2,
    borderRadius: 25,
    borderColor: colors.darkBlue
  },
  keywordTextStyle: {
    fontSize: 15,
    textAlign: 'left',
    alignItems: 'center',
    paddingRight: 10,
    color: colors.black,
  }
};

export { Keyword };
