import React from 'react'
import { Button, Modal, ModalBody, ModalHeader } from 'flowbite-react'
import { HiOutlineExclamationTriangle } from 'react-icons/hi2'

import buttonTheme from '@/lib/themes/button'
import modalTheme from '@/lib/themes/modal'
import { Marketplace } from '../types'

interface ModalDeleteMarketplaceProps {
  isOpen: boolean
  marketplace: Marketplace | null
  isDeleting: boolean
  onClose: () => void
  onConfirm: () => Promise<void>
}

export default function ModalDeleteMarketplace({
  isOpen,
  marketplace,
  isDeleting,
  onClose,
  onConfirm,
}: ModalDeleteMarketplaceProps) {
  return (
    <Modal
      show={isOpen}
      size="md"
      onClose={onClose}
      popup
      theme={modalTheme.modal}
    >
      <ModalHeader />
      <ModalBody>
        <div className="text-center">
          <HiOutlineExclamationTriangle className="mx-auto mb-4 h-14 w-14 text-slate-400 dark:text-gray-200" />
          <h3 className="mb-5 text-lg font-normal text-slate-500 dark:text-gray-400">
            Are you sure you want to delete marketplace{' '}
            <strong>&ldquo;{marketplace?.name}&rdquo;</strong>?
          </h3>
          <div className="flex justify-center gap-4">
            <Button
              color="red"
              theme={buttonTheme.button}
              onClick={onConfirm}
              disabled={isDeleting}
            >
              {isDeleting ? 'Deleting…' : 'Yes, I am sure'}
            </Button>
            <Button
              color="alternative"
              theme={buttonTheme.button}
              onClick={onClose}
              disabled={isDeleting}
            >
              No, cancel
            </Button>
          </div>
        </div>
      </ModalBody>
    </Modal>
  )
}