<script lang="ts">
	let { guessCount }: { guessCount: number } = $props();

	let promptText = $state("What book of the Bible is this verse from?");
	let visible = $state(true);

	$effect(() => {
		let fadeOutId: ReturnType<typeof setTimeout>;
		let changeId: ReturnType<typeof setTimeout>;

		function animateTo(newText: string, delay = 0) {
			fadeOutId = setTimeout(() => {
				visible = false;
				changeId = setTimeout(() => {
					promptText = newText;
					visible = true;
				}, 300);
			}, delay);
		}

		if (guessCount === 0) {
			animateTo("What book of the Bible is this verse from?");
		} else {
			animateTo("Guess again", 2100);
		}

		return () => {
			clearTimeout(fadeOutId);
			clearTimeout(changeId);
		};
	});
</script>

<p
	class="big-text text-center text-gray-800 dark:text-gray-100 mb-6 px-4"
	style="transition: opacity 0.3s ease; opacity: {visible ? 1 : 0};"
>
	{promptText}
</p>
