import { Dialog, DialogPanel } from '@headlessui/react'
import type { ReactNode } from 'react'

type ModalProperties = {
  isOpen: boolean
  onClose: () => void
  children: ReactNode
}

export default function PopupModal({
  isOpen,
  onClose,
  children,
}: ModalProperties) {
  if (!isOpen) return
  return (
    <Dialog
      open={isOpen}
      as="div"
      className="relative z-30 focus:outline-none"
      onClose={onClose}
    >
      <div className="fixed inset-0 z-30 w-screen overflow-y-auto backdrop-blur-sm">
        <div className="flex min-h-full items-center justify-center sm:p-4">
          <DialogPanel
            transition
            className="w-full rounded-xl bg-white p-5 shadow duration-300 ease-out data-[closed]:transform-[scale(95%)] data-[closed]:opacity-0 max-md:min-h-screen max-md:min-w-screen max-sm:p-[50px] sm:max-w-md sm:p-10"
          >
            {children}
          </DialogPanel>
        </div>
      </div>
    </Dialog>
  )
}