import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {IconReload} from '@tabler/icons-react-native';
import {Pressable} from '@components/_core/Pressable';
import {Typography} from '@components/_core/Typography';
import {useTheme} from '@shared/theme';

import {styles} from './styles';

interface Props {
  onPress: () => void;
  show: boolean;
}

export function ReplayButton({onPress, show}: Props) {
  const {iconSizes, theme} = useTheme();
  const {t} = useTranslation();

  return show ? (
    <View style={styles.backdrop}>
      <Pressable onPress={onPress} style={styles.container}>
        <IconReload color={theme.text.neutral.inverted} size={iconSizes.x5} />
        <Typography color={theme.text.neutral.inverted}>
          {t('home.see_again')}
        </Typography>
      </Pressable>
    </View>
  ) : null;
}
