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

import { APP } from '~/data/meta'

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

export const PopupModal = ({
  isOpen,
  onClose,
  children,
  description,
}: 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-6 rounded-lg bg-white p-8 shadow-lg duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0">
          <DialogTitle className="flex justify-center">
            <img
              src={APP.logo}
              alt={APP.title}
              className="h-[80px]"
            />
          </DialogTitle>
          {description && (
            <Description className="text-center text-[#565658]">
              {description}
            </Description>
          )}
          <div className="relative">{children}</div>
        </DialogPanel>
      </div>
    </Dialog>
  )
}