import { useState } from "react";
import Button from "./Low/Button";
import Modal from "./Modal";

interface Props {
	open?: boolean
}

export default function PracticeModal({ open }: Props) {
	const [isOpen, setIsOpen] = useState<boolean>(open || false)

	return (
		<Modal title="Practice Questions" isOpen={isOpen} onClose={() => setIsOpen(false)}>
			<div className="py-4 flex flex-col gap-4 items-center">
				<span className="w-full">
					To acquaint yourself with the question types in this section, please respond to the practice questions provided.
					<br />
					<b>Do note that these questions are for practice purposes only and are not graded.</b>
					<br />
					You may choose to skip them if you prefer.
				</span>
				<Button onClick={() => setIsOpen(false)} className="w-full max-w-[200px]">Understood</Button>
			</div>
		</Modal>
	)
}