encoach_frontend/src/components/QuestionsModal.tsx

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

interface Props {
	isOpen: boolean;
	type?: "module" | "blankQuestions" | "submit";
	unanswered?: boolean;
	onClose: (next?: boolean) => void;
}

export default function QuestionsModal({ isOpen, onClose, type = "module", unanswered = false }: Props) {
	const [isClosing, setIsClosing] = useState(false);

	const blockMultipleClicksClose = (x: boolean) => {
		if (!isClosing) {
			setIsClosing(true);
			onClose(x);
		}

		setTimeout(() => {
			setIsClosing(false);
		}, 400);
	}

	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">
							{type === "module" && (
								<>
									<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 of 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={() => blockMultipleClicksClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
											Go Back
										</Button>
										<Button color="purple" onClick={() => blockMultipleClicksClose(true)} className="max-w-[200px] self-end w-full">
											Continue
										</Button>
									</div>
								</>
							)}
							{type === "blankQuestions" && (
								<>
									<Dialog.Title className="font-bold text-2xl">Questions Unanswered</Dialog.Title>
									<div className="flex flex-col text-xl gap-2">
										<p>You have left some questions unanswered in the current part.</p>
										<p>If you wish to continue, you can still access this part later using the navigation bar at the top or the &quot;Back&quot; button.</p>
										<p>Do you want to proceed to the next part, or would you like to go back and complete the unanswered questions in the current part?</p>
									</div>
									<div className="w-full flex justify-between mt-4">
										<Button color="purple" onClick={() => blockMultipleClicksClose(false)} variant="outline" className="max-w-[200px] self-end w-full">
											Go Back
										</Button>
										<Button color="purple" onClick={() => blockMultipleClicksClose(true)} className="max-w-[200px] self-end w-full">
											Continue
										</Button>
									</div>
								</>
							)}
							{type === "submit" && (
								<>
									<Dialog.Title className="font-bold text-3xl text-mti-rose-light">Confirm Submission</Dialog.Title>
									<span className="text-xl">
										{unanswered ? (
											<>
												By clicking &quot;Submit&quot;, you are finalizing your exam with some <b>questions left unanswered</b>. Once you submit, you will not be able to review or change any of your answers, including the unanswered ones. <br />
												<br />
												Are you sure you want to submit and complete the exam <b>with unanswered questions</b>?
											</>
										) : (
											<>
												By clicking &quot;Submit&quot;, you are finalizing your exam. Once you submit, you will not be able to review or change any of your answers. <br />
												<br />
												Are you sure you want to submit and complete the exam?
											</>
										)}
									</span>
									<div className="w-full flex justify-between mt-4">
										<Button color="purple" onClick={() => blockMultipleClicksClose(false)} variant="outline" className="max-w-[200px] self-end w-full !text-xl">
											Go Back
										</Button>
										<Button color="rose" onClick={() => blockMultipleClicksClose(true)} className="max-w-[200px] self-end w-full !text-xl">
											Submit
										</Button>
									</div>
								</>
							)}
						</Dialog.Panel>
					</div>
				</Transition.Child>
			</Dialog>
		</Transition>
	);
}