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

import { useModalDeleteUser } from './useModalDeleteUser'

interface Props {
  show: boolean
  onClose: () => void
}

export default function ModalDeleteUser({ show, onClose }: Props) {
  const { handleDelete } = useModalDeleteUser({ onClose })

  return (
    <Modal
      show={show}
      onClose={onClose}
      size="md"
      position="center"
      popup
      dismissible
      className="flex items-center justify-center min-h-screen">
      <Modal.Header />

      <Modal.Body>
        <div className="text-center">
          <HiOutlineExclamationCircle className="mx-auto mb-4 h-14 w-14 text-error" />
          <h3 className="mb-5 text-lg font-semibold text-gray-500 dark:text-gray-400">
            ¿Estás seguro de eliminar este usuario?
          </h3>
          <p className="text-gray-500 mb-4">
            Al eliminar el usuario no podrás recuperarlo y podrías afectar otros
            datos
          </p>
          <div className="flex justify-center gap-4">
            <Button color="failure" onClick={handleDelete}>
              Sí, estoy seguro
            </Button>
            <Button color="gray" onClick={onClose}>
              No, cancelar
            </Button>
          </div>
        </div>
      </Modal.Body>
    </Modal>
  )
}