import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { MdClose } from '@react-icons/all-files/md/MdClose';
import styles from './modal.module.scss';

const Modal = ({ children }) => {
  const [show, setShow] = useState(false);

  useEffect(() => {
    setShow(!show);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const handelClose = (e) => {
    if (e.target.className === styles.modal) {
      setShow(false);
    }
  };

  if (show) {
    return (
      <div
        role="button"
        aria-hidden="true"
        onClick={(e) => handelClose(e)}
        className={`${styles?.modal || ''}`}
      >
        <div className={styles?.success || ''}>
          {children}
          <MdClose
            className={styles?.closeBtn || ''}
            onClick={() => setShow(false)}
            title="Close Icon"
          />
        </div>
      </div>
    );
  }

  return <></>;
};
Modal.propTypes = {
  children: PropTypes.node,
};
export default Modal;
