import React from 'react';
import {useTranslation} from 'react-i18next';
import {IconArrowLeft} from '@tabler/icons-react-native';
import {useTheme} from '@shared/theme';

import {IconButton, IconButtonProps} from '../IconButton';

type Props = Omit<IconButtonProps, 'Icon' | 'variant'>;

export function BackButton({iconColor, ...props}: Props) {
  const {t} = useTranslation();
  const {theme, spacing} = useTheme();
  return (
    <IconButton
      {...props}
      accessibilityLabel={t('general.back')}
      iconColor={iconColor || theme.text.neutral.default}
      variant="tertiary"
      Icon={IconArrowLeft}
      hitSlop={spacing.x2}
    />
  );
}
