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

const DiscardChangesModal = ({ isOpen, onClose, onDiscard }) => {
  return (
    <Transition appear show={isOpen} as={Fragment}>
      <Dialog as="div" className="ino:relative ino:z-99999" onClose={onClose}>
        <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-amber-500/15 ino:text-amber-600 ino:dark:text-amber-400">
                  <ExclamationTriangleIcon className="ino:size-5" />
                </div>
                <div>
                  <Dialog.Title
                    as="h3"
                    className="ino:m-0 ino:text-base ino:font-semibold ino:text-card-foreground"
                  >
                    Discard unsaved changes?
                  </Dialog.Title>
                  <p className="ino:m-0 ino:mt-1 ino:text-sm ino:text-muted-foreground">
                    You have changes that haven&apos;t been saved. If you leave
                    now, they&apos;ll be lost.
                  </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={onClose}
                  className="ino:h-9 ino:cursor-pointer ino:rounded-md ino:bg-card ino:px-4 ino:text-foreground"
                >
                  Keep Editing
                </Button>
                <Button
                  onClick={onDiscard}
                  className="ino:h-9 ino:cursor-pointer ino:rounded-md ino:bg-red-600 ino:px-4 ino:text-white ino:shadow-sm ino:hover:bg-red-700"
                >
                  Discard Changes
                </Button>
              </div>
            </Dialog.Panel>
          </div>
        </div>
      </Dialog>
    </Transition>
  );
};

export default DiscardChangesModal;