import React, {FC} from 'react';
import {Modal} from 'react-native';
import CheckingLogo from '@assets/svg/Checking';
import {
  Overlay,
  Wrapper,
  Title,
  Description,
} from '@styles/components/checking-modal';

interface IProps {
  description: string | undefined;
  visible?: boolean;
  title: string;
  //   SVG: React.ReactNode;
}

const CheckingModal: FC<IProps> = ({
  description,
  visible,
  title,
  //SVG,
}) => {
  return (
    <Modal
      animationType="fade"
      transparent={true}
      visible={visible}
      //onRequestClose={hideModal}
      testID="testCheckingModal">
      <Overlay activeOpacity={1} testID="testCheckingOverlay" />
      <Wrapper edges={['bottom']}>
        <CheckingLogo />
        <Title>{title}</Title>
        <Description>{description}</Description>
      </Wrapper>
    </Modal>
  );
};

export default CheckingModal;