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 (
    <>
      <div className="bg-opacity-50 fixed inset-0 z-50 grid place-items-center bg-gray-300/50">
        <button
          onClick={onClose}
          className="absolute top-5 right-5 z-50 bg-red-500 p-3 text-gray-500 hover:text-gray-800"
        >
          ✖
        </button>
        <div className="relative rounded-lg bg-white p-6 shadow-lg">
          {children}
        </div>
      </div>
    </>
  )
}