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

    const path = "/images/";

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

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

<div class="mb-4 flex w-full grow flex-col items-center gap-2 text-6xl">
    {#if showQuestion || showAnswer}
        <div class="flex grow items-center">
            <div class="text-center">{question.data.question}</div>
        </div>
        <div class="container grow-6">
            <img
                src={path + question.data.image}
                alt={path + question.data.image}
                class={isBuzzed ? "blurry" : ""}
            />
        </div>
    {/if}
    {#if showAnswer}
        <div class="flex grow items-center text-center">
            {question.data.answer}
        </div>
    {/if}
</div>

<style>
    .container {
        position: relative;
    }

    .container > img {
        position: absolute;
        top: 50%;
        left: 50%;
        max-height: 100%;
        max-width: 100%;
        display: block;
        transform: translate(-50%, -50%);
    }

    .blurry {
        filter: blur(60px);
    }
</style>
