<script>
    const {events} = $props();

</script>

<div class="event-list">
    {#if events}
        {#each events as event}
            <div class="event">
                <h2>{event?.title ?? "No title"}</h2>
                <p class="event-description">{@html event?.description}</p>
                <p><a href={"/events/" + event.slug}>Details</a></p>
            </div>
        {/each}
    {:else}
       <p>No events</p>
    {/if}
</div>

<style>
    .event {
        padding: 0.5rem 1rem;

        border: 2px solid #00000055;
        border-radius: 3%;
    }
</style>
