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

const FormLabel = ({ bold, required, labelText, textStyle }) => {
  if (bold && required) {
    return (
      <View style={styles.formLabelStyle}>
        <Text style={styles.requiredTextNotationStyle}> * </Text>
        <Text style={[styles.labelTextStyle, { fontWeight: 'bold', color: colors.black }, textStyle]}>
          {labelText}
        </Text>
      </View>
    );
  } else if (required) {
    return (
      <View style={styles.formLabelStyle}>
        <Text style={styles.requiredTextNotationStyle}> * </Text>
        <Text style={[styles.labelTextStyle, textStyle]}>{labelText}</Text>
      </View>
    );
  } else if (bold) {
    return (
      <View style={styles.formLabelStyle}>
        <Text style={[styles.labelTextStyle, { fontWeight: 'bold', color: colors.black }, textStyle]}>
          {labelText}
        </Text>
      </View>
    );
  }

  return (
    <View style={styles.formLabelStyle}>
      <Text style={[styles.labelTextStyle, textStyle]}>{labelText}</Text>
    </View>
  );
};

const styles = {
  formLabelStyle: {
    flexDirection: 'row',
    paddingTop: 5,
    paddingLeft: 15,
    paddingBottom: 5
  },
  requiredTextNotationStyle: {
    fontSize: 15,
    color: colors.red,
    textAlign: 'left'
  },
  labelTextStyle: {
    fontSize: 16,
    textAlign: 'left'
  }
};

export { FormLabel };
