/*
* https://frontendeval.com/questions/modal-overlay
*
* Build a modal control and overlay
*/

const { useState } = React;

const App = () => {
  return(
    <div>
      <ModalOverlay />
    </div>
  )
}

const ModalOverlay = () => {
  const [open, setOpen] = useState(false); 
  return(
    <div>
      {
        open? <Modal setOpen={setOpen} /> : <button onClick={() => { open ? setOpen(false) : setOpen(true) }}>Show Offer!</button>
      }
    </div>
  )
}

const Modal = ({ setOpen }) => {
  
  const [isAccepted, setAccepted] = useState(false); 
  
  return(
    <div>
      {
        isAccepted? <AcceptedOffer /> : 
          <div> 
            <button onClick={() => setOpen(false)}>X</button>
            <div>
              <p>Click the button below to accept our amazing offer!</p>
              <button onClick={() => setAccepted(true)}>Accept Offer!</button>
            </div>
          </div>
      }
    </div>
  )
}

const AcceptedOffer = () => {
  return(
    <div>
      <p>Offer Accepted!</p>
    </div>
  )
}


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