import React, { useCallback, useState } from 'react';

import Modal from '@dotmind/react-modals';

const App: React.FC = () => {
  const [modalOpen, setModalOpen] = useState(false);

  const handleChangeModal = useCallback(() => {
    setModalOpen((prevState) => !prevState);
  }, [setModalOpen]);

  return (
    <div>
      <h1>Test react modal</h1>
      <button onClick={handleChangeModal}>Click me !</button>
      <Modal
        modalOpen={modalOpen}
        onClose={handleChangeModal}
        containerZIndex={9999}
      >
        <h1>This is modal content</h1>
        <p>You can put your html here, have fun !</p>
      </Modal>
    </div>
  );
};