const Overlay = props => {
  return (
    <div id='overlay'>
      <main>
        {props.children}
        <button onClick={props.close}>X</button>
      </main>

      <style jsx>
        {`
        #overlay {
          position: fixed;
          height: 100vh;
          width: 100vw;
          top: 0;
          left: 0;
          background: rgba(10,10,10,0.4);
        }

        main {
            position: relative;
          max-width: 800px;
          margin: auto auto;
          background: white;
        }

        button {
          position: absolute;
          right: 0;
          top: 0;
        }

      `}
      </style>
    </div>
  )
}

export default Overlay