import {Dialog, Transition} from "@headlessui/react";
import {Fragment} from "react";
import Button from "./Low/Button";

interface Props {
    isOpen: boolean;
	abandonPopupTitle: string;
	abandonPopupDescription: string;
	abandonConfirmButtonText: string;
	onAbandon: Function;
    onCancel: Function;
}

export default function AbandonPopup({
    isOpen,
    abandonPopupTitle,
	abandonPopupDescription,
	abandonConfirmButtonText,
	onAbandon,
    onCancel,
}: Props) {
        return (
            <Transition show={isOpen} as={Fragment}>
                <Dialog onClose={onCancel} className="relative z-50">
                    <Transition.Child
                        as={Fragment}
                        enter="ease-out duration-300"
                        enterFrom="opacity-0"
                        enterTo="opacity-100"
                        leave="ease-in duration-200"
                        leaveFrom="opacity-100"
                        leaveTo="opacity-0">
                        <div className="fixed inset-0 bg-black/30" />
                    </Transition.Child>
    
                    <Transition.Child
                        as={Fragment}
                        enter="ease-out duration-300"
                        enterFrom="opacity-0 scale-95"
                        enterTo="opacity-100 scale-100"
                        leave="ease-in duration-200"
                        leaveFrom="opacity-100 scale-100"
                        leaveTo="opacity-0 scale-95">
                        <div className="fixed inset-0 flex items-center justify-center p-4">
                            <Dialog.Panel className="w-full max-w-2xl h-fit p-8 rounded-xl bg-white flex flex-col gap-4">
                                <Dialog.Title className="font-bold text-xl">{abandonPopupTitle}</Dialog.Title>
                                <span>{abandonPopupDescription}</span>
                                <div className="w-full flex justify-between mt-8">
                                    <Button color="purple" onClick={onCancel} variant="outline" className="max-w-[200px] self-end w-full">
                                        Cancel
                                    </Button>
                                    <Button color="purple" onClick={onAbandon} className="max-w-[200px] self-end w-full">
                                        {abandonConfirmButtonText}
                                    </Button>
                                </div>
                            </Dialog.Panel>
                        </div>
                    </Transition.Child>
                </Dialog>
            </Transition>
    );
}