import React from 'react'
import { Third } from './Layout'

import tw, { styled } from "twin.macro"
import 'styled-components/macro'

function Modal({ isOpen, onBackdropClick, ...props }) {
    if (isOpen) {
        return <div onClick={onBackdropClick} tw="fixed flex flex-col justify-center items-center inset-0 bg-gray-800 bg-opacity-75">
            <Third {...props} onClick={e=>e.stopPropagation()}>
                {props.children}
            </Third>
        </div>
    }
    return null;
}
export default Modal