import React from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
import {Icon} from 'components';
import {useTranslation} from 'react-i18next';
import styles from './styles';

const Header = props => {
  const {t} = useTranslation();
  const {navigation, smTitle, lgTitle, subTitle, onButtonPress} = props;
  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <TouchableOpacity
          onPress={() => navigation.goBack()}
          style={styles.leftButton}>
          <Icon
            name="arrowleft"
            type="AntDesign"
            style={styles.leftButtonIcon}
          />
        </TouchableOpacity>
        {smTitle && (
          <View style={styles.bodyCenter}>
            <Text numberOfLines={1} style={styles.smTitle}>
              {smTitle}
            </Text>
            {subTitle && (
              <Text numberOfLines={1} style={styles.subTitle}>
                {subTitle}
              </Text>
            )}
          </View>
        )}
        {lgTitle && (
          <View style={styles.bodyStart}>
            <Text numberOfLines={1} style={styles.lgTitle}>
              {lgTitle}
            </Text>
          </View>
        )}
        {onButtonPress && (
          <TouchableOpacity onPress={onButtonPress} style={styles.button}>
            <Text style={styles.buttonTitle}>{t('change_text')}</Text>
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

Header.defaultProps = {
  subTitle: undefined,
  onButtonPress: undefined,
};

export default Header;
