import React from 'react';
import { TouchableOpacity, Text, View } from 'react-native';
import { InlineButtonProps } from './inlineButton.props';
import { styles } from './inlineButton.styles';

export function InlineButton({
  onPress,
  text,
  highlightedText,
  style,
  textStyle,
  highlightedTextStyle,
}: InlineButtonProps) {
  return (
    <TouchableOpacity
      activeOpacity={0.7}
      style={[styles.button, style]}
      onPress={onPress}
    >
      <View style={styles.row}>
        {text && <Text style={[styles.text, textStyle]}>{text} </Text>}
        {highlightedText && (
          <Text style={[styles.highlight, highlightedTextStyle]}>
            {highlightedText}
          </Text>
        )}
      </View>
    </TouchableOpacity>
  );
}