import React, {FC, ReactNode} from 'react';
import {Modal as RNModal} from 'react-native';
import {Overlay, Wrapper} from '@styles/components/modal';

interface IProps {
  visible: boolean;
  children?: ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl';
}

const Modal: FC<IProps> = ({visible, children, size = 'sm'}) => (
  <RNModal
    animationType="fade"
    transparent={true}
    visible={visible}
    testID="testCheckingModal">
    <Overlay activeOpacity={1} testID="testCheckingOverlay" />
    <Wrapper size={size} edges={['bottom']}>
      {children}
    </Wrapper>
  </RNModal>
);

export default Modal;