import { useContext } from "react";
import {
  ModalContextProvider,
  ModalVersion,
  ModalContext,
} from "@samuelprigent/react-modal-context";

const App = () => {
  const CustomModal = () => {
    const { toggleShow } = useContext(ModalContext);

    // == Your modal here
    const modalContent = (
      <>
        <h2>Modal title</h2>
        <p>Description of the modal</p>
        <div onClick={toggleShow} className="closeButton">
          Close
        </div>
      </>
    );

    // == Your trigger here
    return (
      <>
        <button onClick={toggleShow} className="button-style">
          Show modal
        </button>
        <ModalVersion modalContent={modalContent} />
      </>
    );
  };

  return (
    <ModalContextProvider>
      <CustomModal />
    </ModalContextProvider>
  );
};