import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconX} from '@tabler/icons-react-native';
import {IconButton, Typography} from '@components';
import {useGoBack} from '@hooks/useGoBack';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

export function LoanHeader() {
  const {t} = useTranslation();
  const {theme} = useTheme();
  const {goBack} = useGoBack();

  return (
    <View style={styles.header}>
      <Typography
        variant="l"
        weight="semiBold"
        style={styles.title}
        numberOfLines={1}>
        {t('loans.title')}
      </Typography>
      <IconButton
        Icon={IconX}
        onPress={goBack}
        variant="flat"
        iconColor={theme.text.neutral.default}
        hitSlop={8}
      />
    </View>
  );
}