<script context="module" lang="ts">
    import type { components } from "../../apiScheme";

    type Event = components["schemas"]["Event"];
</script>

<script lang="ts">
    import TeamGame from "./TeamGame.svelte";
    import FreeForAllGame from "./FreeForAllGame.svelte";

    export let event: Event;
    export let open: boolean = false;
</script>


<div class="bg-gray-800 px-5 py-5 rounded-lg" on:click>
    <p class="text-xl font-bold">{event.name} <span class="text-sm font-normal">[{Object.keys(event.event_type)[0]}]</span></p> 
    <p class="text-sm font-mono">{event.id}</p> 

    <p>{event.description}</p>

    {#if open}
        <div class="bg-gray-700 px-3 py-3 rounded-lg mt-5">
        {#if 'FreeForAllGame' in event.event_type}
            {@const et = event.event_type['FreeForAllGame']}
            <FreeForAllGame event={et} />
        {:else if 'TeamGame' in event.event_type}
            {@const et = event.event_type['TeamGame']}
            <TeamGame event={et} />
        {/if}
        </div>
    {/if}
</div>
