<script lang="ts">
    import type { SimpleQuestion } from "./games/games";

    interface Props {
        question: SimpleQuestion;
        showAnswer: boolean;
        showQuestion: boolean;
        [key: string]: unknown;
    }

    let { question, showAnswer, showQuestion }: Props = $props();
</script>

<div class="mb-4 flex grow flex-col items-center text-6xl">
    {#if showQuestion || showAnswer}
        <div class="flex grow-1 items-center">
            <div class="text-center">{question.data.question}</div>
        </div>
    {/if}
    {#if showAnswer}
        <div class="flex grow-1 items-center text-center">
            {question.data.answer}
        </div>
    {/if}
</div>
