import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {Typography} from '@components/_core/Typography';
import {Dialog} from '@components/_HuGo/Dialog';

import {styles} from './styles';

interface Props {
  onCancelExit: () => void;
  onConfirmExit: () => void;
  showPreventExit: boolean;
}

export function PreventExitDialog({
  onCancelExit,
  onConfirmExit,
  showPreventExit,
}: Props) {
  const {t} = useTranslation();

  return (
    <Dialog
      footer={{
        primaryButton: {
          text: t('general.exit'),
          onPress: onConfirmExit,
        },
        secondaryButton: {
          text: t('general.cancel'),
          onPress: onCancelExit,
        },
      }}
      isVisible={showPreventExit}
      onClose={onCancelExit}
      title={t('general.prevent_publish_exit_title')}
      withCloseButton={false}>
      <View style={styles.container}>
        <Typography>{t('general.prevent_publish_exit_description')}</Typography>
      </View>
    </Dialog>
  );
}
