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

import { LeftArrow } from '~/components/icons/left-arrow'
import { APP } from '~/configs/meta'

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

export const PopupModal = ({
  isOpen,
  onClose,
  children,
  description,
}: ModalProperties) => {
  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 justify-center overflow-y-auto p-0 max-sm:bg-white sm:items-center sm:p-4">
        <DialogPanel
          transition
          className="max-w-lg space-y-6 rounded-lg bg-white p-8 duration-300 ease-out data-[closed]:scale-95 data-[closed]:opacity-0 sm:shadow-lg"
        >
          <DialogTitle className="relative flex justify-center">
            <button
              onClick={onClose}
              className="absolute top-0 left-0 items-center sm:hidden"
            >
              <LeftArrow
                width={50}
                height={50}
              />
            </button>
            <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>
  )
}