<script lang="ts">
    import {Card} from "flowbite-svelte";
    import {link} from 'svelte-spa-router'
    import type {ShortEvent} from "../../types/event.js";

    export let event: ShortEvent;

    $: sameDate = new Intl.DateTimeFormat().format(event.start) === new Intl.DateTimeFormat().format(event.end);
</script>

<a href="/event/{event.id}" use:link>
    <Card class="hover:scale-105 transition">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{event.name}</h5>
        {#if !sameDate}
            <p>Startet: {new Intl.DateTimeFormat().format(event.start)}</p>
            <p>Endet: {new Intl.DateTimeFormat().format(event.end)}</p>
        {:else}
            <p>Am: {new Intl.DateTimeFormat().format(event.start)}</p>
            <p>&nbsp;</p>
        {/if}
    </Card>
</a>
