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

interface 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"
    >
      <DialogBackdrop className="fixed inset-0 bg-black/30" />
      <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">
          <div className="relative">{children}</div>
        </DialogPanel>
      </div>
    </Dialog>
  )
}
