import { Dialog, DialogBackdrop, 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}
      onClose={onClose}
      className="relative z-50"
      transition
    >
      <DialogBackdrop
        className="fixed inset-0 bg-black/50 duration-300 ease-out data-[closed]:opacity-0"
        transition
      />
      <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
        <DialogPanel className="max-w-lg space-y-4 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
          <div className="relative">{children}</div>
        </DialogPanel>
      </div>
    </Dialog>
  )
}
