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

interface Props {
	isOpen: boolean;
	onClose: (next?: boolean) => void;
}

export default function BlankQuestionsModal({isOpen, onClose}: Props) {
	return (
		<Transition show={isOpen} as={Fragment}>
			<Dialog onClose={() => onClose(false)} 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">Questions Unanswered</Dialog.Title>
							<span>
								Please note that you are finishing the current module and once you proceed to the next module, you will no longer be
								able to change the answers in the current one, including your unanswered questions. <br />
								<br />
								Are you sure you want to continue without completing those questions?
							</span>
							<div className="w-full flex justify-between mt-8">
								<Button color="purple" onClick={() => onClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
									Go Back
								</Button>
								<Button color="purple" onClick={() => onClose(true)} className="max-w-[200px] self-end w-full">
									Continue
								</Button>
							</div>
						</Dialog.Panel>
					</div>
				</Transition.Child>
			</Dialog>
		</Transition>
	);
}