import React from "react"
import PropTypes from "prop-types"
import cx from "classnames"
import { DialogOverlay, DialogContent } from "@reach/dialog"
import { motion, AnimatePresence } from "framer-motion"

const AnimatedDialogContent = motion.custom(DialogContent)

const DEFAULT = "p-0 bg-white font-sans rounded shadow w-4/5 max-w-2xl"

function Dialog({ children, label, onClose, className, ...props }) {
  return (
    <DialogOverlay onDismiss={onClose} {...props}>
      <AnimatePresence>
        <AnimatedDialogContent
          key="modal-content"
          aria-label={label}
          className={cx(className, DEFAULT)}
          initial={{ opacity: 0, y: -15 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0 }}
        >
          <div>{children}</div>
        </AnimatedDialogContent>
      </AnimatePresence>
    </DialogOverlay>
  )
}

Dialog.propTypes = {
  children: PropTypes.node,
  label: PropTypes.string,
  className: PropTypes.string,
  onClose: PropTypes.func.isRequired,
}

export default Dialog
