import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useNavigation} from '@react-navigation/native';
import {BackButton, Typography} from '@components';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export function Header() {
  const {goBack} = useNavigation();
  const {theme} = useTheme();
  const {t} = useTranslation();

  return (
    <View
      style={[
        styles.container,
        {borderBottomColor: theme.border.neutral.default},
      ]}>
      <BackButton onPress={goBack} />
      <View style={styles.centered}>
        <Typography variant={'s'} weight={'semiBold'}>
          {t('chat.message_info.header_title')}
        </Typography>
      </View>
    </View>
  );
}