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

const TextButton = ({ leftText, leftTextStyle, rightText, rightTextStyle, containerStyle, onPress, disabled }) => (
  <View style={[styles.textButtonStyle, containerStyle]} >
    <Text style={[styles.textStyle, leftTextStyle]}>
      {leftText}
    </Text>
    <TouchableOpacity
      onPress={onPress}
      disabled={disabled}
    >
      <Text style={[styles.textButtonTitleStyle, rightTextStyle]} >
        {rightText}
      </Text>
    </TouchableOpacity>
  </View>
);

const styles = {
  textButtonStyle: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    left: 20,
    marginTop: 10,
  },
  textStyle: {
    color: colors.black,
    fontSize: 17
  },
  textButtonTitleStyle: {
    color: colors.buttonBlue,
    fontSize: 17,
    fontWeight: 'bold'
  }
};

export { TextButton };
