/* eslint-disable react-hooks/exhaustive-deps */
import React, {useRef, useEffect, useState} from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  Dimensions,
  ScrollView,
} from 'react-native';
import Modal from 'react-native-modal';
import {Icon, Button} from 'components';
import {Colors} from 'global-styles';
import {useTranslation} from 'react-i18next';
import styles from './styles';
const {width, height} = Dimensions.get('window');

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

  return (
    <Modal
      isVisible={isVisible}
      style={styles.modal}
      deviceHeight={height}
      deviceWidth={width}
      animationIn="fadeInUp"
      animationOut="fadeOutDown"
      useNativeDriver={true}>
      <View style={styles.container}>
        <View style={styles.content}>
          <View style={styles.header}>
            <TouchableOpacity onPress={onClose}>
              <Icon
                name="close"
                type="AntDesign"
                style={styles.buttonCloseIcon}
              />
            </TouchableOpacity>
            <Text style={styles.headerTitle}>
              {t('term_and_condition_text')}
            </Text>
          </View>
          <View style={styles.body}>
            <ScrollView>
              <Text style={styles.note}>{t('term_and_condition_note')}</Text>
            </ScrollView>
            <Button title={t('verify_now_text')} />
          </View>
        </View>
      </View>
    </Modal>
  );
};

export default ModalTermsAndConditions;
