'use client'

import { Button, Modal, ModalBody, ModalHeader } from 'flowbite-react'
import { HiOutlineExclamationCircle } from 'react-icons/hi'

import modalTheme from '@/lib/themes/modal'
import buttonTheme from '@/lib/themes/button'

interface DeleteModalProps {
  isOpen: boolean
  message: string
  isDeleting?: boolean
  onClose: () => void
  onConfirm: () => void
}

export default function DeleteModal({
  isOpen,
  message,
  isDeleting = false,
  onClose,
  onConfirm,
}: DeleteModalProps) {
  return (
    <Modal
      show={isOpen}
      size="md"
      onClose={onClose}
      popup
      theme={modalTheme.modal}
    >
      <ModalHeader />
      <ModalBody>
        <div className="text-center">
          <HiOutlineExclamationCircle className="mx-auto mb-4 h-12 w-12 text-red-600" />
          <h3 className="text-lg font-normal">{message}</h3>
          <p className="mt-2 text-sm text-slate-500">
            This action cannot be undone.
          </p>

          <div className="flex justify-center gap-3 mt-6">
            <Button
              color="red"
              theme={buttonTheme.button}
              onClick={onConfirm}
              disabled={isDeleting}
            >
              {isDeleting ? 'Deleting…' : 'Delete'}
            </Button>
            <Button
              color="alternative"
              theme={buttonTheme.button}
              onClick={onClose}
              disabled={isDeleting}
            >
              Cancel
            </Button>
          </div>
        </div>
      </ModalBody>
    </Modal>
  )
}