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

interface StateChangeWarningDialogProps {
  isVisible: boolean;
  onConfirm: () => void;
  onCancel: () => void;
  description: string;
}

export function StateChangeWarningDialog({
  isVisible,
  onConfirm,
  onCancel,
  description,
}: StateChangeWarningDialogProps) {
  const {t} = useTranslation();

  return (
    <Dialog
      title={t('service_management.terminal_change.title')}
      titleNumberOfLines={2}
      onClose={onCancel}
      isVisible={isVisible}
      footer={{
        primaryButton: {
          text: t('general.continue'),
          onPress: onConfirm,
        },
        secondaryButton: {
          text: t('general.cancel'),
          onPress: onCancel,
        },
      }}>
      <View>
        <Typography>{description}</Typography>
      </View>
    </Dialog>
  );
}