// @ts-nocheck
import { Button } from "@/components/ui/button";
import { Dialog, Transition } from "@headlessui/react";
import { TrashIcon } from "@heroicons/react/24/outline";
import { Fragment } from "react";
import LoadingSpinner from "./LoadingSpinner";

const DeleteModal = ({ isOpen, setIsOpen, handleDelete, isLoading }) => {
  return (
    <Transition appear show={isOpen} as={Fragment}>
      <Dialog
        as="div"
        className="ino:relative ino:z-99999"
        onClose={() => setIsOpen(false)}
      >
        <div className="ino:fixed ino:inset-0 ino:bg-black/40 ino:backdrop-blur-[2px]" />

        <div className="ino:fixed ino:inset-0 ino:overflow-y-auto ino:font-sans">
          <div className="ino:flex ino:min-h-full ino:items-center ino:justify-center ino:p-4">
            <Dialog.Panel className="ino:w-full ino:max-w-md ino:transform ino:overflow-hidden ino:rounded-lg ino:border ino:border-border ino:bg-card ino:text-left ino:shadow-xl ino:transition-all">
              <div className="ino:flex ino:gap-4 ino:p-5">
                <div className="ino:flex ino:size-10 ino:shrink-0 ino:items-center ino:justify-center ino:rounded-full ino:bg-red-500/10 ino:text-red-600 ino:dark:text-red-400">
                  <TrashIcon className="ino:size-5" />
                </div>
                <div>
                  <Dialog.Title
                    as="h3"
                    className="ino:m-0 ino:text-base ino:font-semibold ino:text-card-foreground"
                  >
                    Delete this item?
                  </Dialog.Title>
                  <p className="ino:m-0 ino:mt-1 ino:text-sm ino:text-muted-foreground">
                    This action cannot be undone.
                  </p>
                </div>
              </div>

              <div className="ino:flex ino:items-center ino:justify-end ino:gap-2 ino:border-t ino:border-border ino:bg-muted/40 ino:px-5 ino:py-3">
                <Button
                  variant="outline"
                  onClick={() => setIsOpen(false)}
                  className="ino:h-9 ino:cursor-pointer ino:rounded-md ino:bg-card ino:px-4 ino:text-foreground"
                >
                  Cancel
                </Button>
                <Button
                  disabled={isLoading}
                  onClick={handleDelete}
                  className="ino:h-9 ino:min-w-24 ino:cursor-pointer ino:gap-1.5 ino:rounded-md ino:bg-red-600 ino:px-4 ino:text-white ino:shadow-sm ino:hover:bg-red-700"
                >
                  {isLoading ? (
                    <>
                      <LoadingSpinner className="ino:size-4 ino:text-white/40" />
                      Deleting...
                    </>
                  ) : (
                    "Delete"
                  )}
                </Button>
              </div>
            </Dialog.Panel>
          </div>
        </div>
      </Dialog>
    </Transition>
  );
};

export default DeleteModal;