/* eslint-disable react-hooks/exhaustive-deps */
import React, {useRef, useEffect, useState} from 'react';
import {View, Text, Image, TouchableOpacity} from 'react-native';
import Modal from 'react-native-modal';
import {Icon} from 'components';
import {Colors} from 'global-styles';
import {useTranslation} from 'react-i18next';
import styles from './styles';

const ModalError = props => {
  const {t} = useTranslation();
  const {isVisible, onClose, message} = props;

  return (
    <Modal isVisible={isVisible} style={styles.modal}>
      <View style={styles.container}>
        <TouchableOpacity onPress={onClose} style={styles.buttonClose}>
          <Icon name="close" type="AntDesign" style={styles.buttonCloseIcon} />
        </TouchableOpacity>
        <View style={styles.content}>
          <Image
            source={require('assets/images/error-face.png')}
            style={styles.errorImage}
          />
          <Text style={styles.title}>Error</Text>
          <Text style={styles.message}>{message}</Text>
        </View>
      </View>
    </Modal>
  );
};

export default ModalError;
