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: () => void;
	onCancel: () => void;
}

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>
	);
}