import React from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import EmptyListMessage from '@assets/emptyListMessage.svg';
import {BottomModal} from '@components/Modals';
import Text from '@components/Text';
import Button from '@components/Button';
import {GettingReadyType} from '@modules/commons/interfaces';

import {INACTIVITY_MODAL_TITLE} from './constants';
import {styles} from './styles';

interface Props {
  onCloseModal: () => void;
  showModal: boolean;
  type: GettingReadyType;
}

function InactiveFeatureModal({showModal, onCloseModal, type}: Props) {
  const {t} = useTranslation();

  return (
    <BottomModal locked isVisible={showModal} onClose={onCloseModal}>
      <View>
        <View style={styles.topContainer}>
          <EmptyListMessage height={40} width={48} />
          <Text align="center" variant="h6">
            {t(INACTIVITY_MODAL_TITLE[type])}
          </Text>
        </View>
        <Text variant="body1" style={styles.modalText}>
          {t('general.inactive_feature_contact')}
        </Text>
        <Button text={t('general.accept')} onPress={onCloseModal} />
      </View>
    </BottomModal>
  );
}

export default InactiveFeatureModal;