<script lang="ts">
	interface Props {
		promptText: string;
		correctAnswers: string[];
	}

	let { promptText, correctAnswers }: Props = $props();

	let mode: 'guess' | 'reveal' = 'reveal';
</script>

<section class="flashcard">
	<div class="prompt-text">
		<p class="prompt-text__text">{promptText}</p>
	</div>
	<div class="answer-text">
		<label for="answer" class="label">Answer</label>
		<input type="text" id="answer" class="input" />
	</div>

	{#if mode === 'reveal'}
		<div class="correct-answers">
			<p class="correct-answers__label">Correct Answers:</p>
			<ul class="correct-answers__list">
				{#each correctAnswers as answer}
					<li class="correct-answers__item">{answer}</li>
				{/each}
			</ul>
		</div>
	{/if}
</section>

<style>
	.flashcard {
		padding: var(--space-1);
		display: grid;
		grid-template-columns: 1fr;
		place-items: center;
		max-width: 500px;
		border: 1px solid var(--colour-grey-300);
	}

	.prompt-text {
	}
</style>
