/*
* https://frontendeval.com/questions/modal-overlay
*
* Build a modal control and overlay
*/
const App = () => {
  const [offerState,setOfferState] = React.useState("hide")
  
  function handleShow(){
    setOfferState("show");
  }
  function handleAccept(){
    setOfferState("accept");
  }
   function handleClose(){
    setOfferState("hide");
  }
  function showCurrentScreen() {
    switch(offerState){
      case "hide":
      default:
        return <button onClick={handleShow}>Show Offer</button>
      case "show":
        return (
           <>
        <div className="modal-overlay" onClick={handleClose}></div>
        <div className="offer-modal">
          <button className="offer-modal-close-button" onClick={handleClose}>X</button>
          <div>Lorem ipsum dolor sit amet consectetur adipisicing                   elit. Pariatur impedit quos hic possimus earum                     eveniet nihil, nobis, ad magnam animi voluptatibus.                 Cumque consectetur facere officiis non quia enim                   alias quas!
          </div> 
          <button onClick={handleAccept}>Accept offer</button>
        </div>
          </>
        )
       
        case "accept":
        return <div>Offer accepted</div>
    }
  }
  return <div className="wrapper">
    {showCurrentScreen()}
  </div>;
}

ReactDOM.render(<App />, document.getElementById('app'));