<script lang="ts">
    const { id, name, date, archived = false } = $props();
</script>

<a
    href={archived ? `/private/events/event/archived?id=${id}` : `/private/events/event/view?id=${id}`}
    class="block border border-gray-300 rounded bg-white p-4 shadow-none transition cursor-pointer hover:border-blue-500 group min-h-[72px] h-full w-full"
    aria-label={archived ? `View archived event ${name}` : `View event ${name}`}
>
    <div class="flex flex-col gap-1">
        <span class="font-semibold text-lg text-black-700 group-hover:underline flex items-center gap-2">
            {#if archived}
                <svg class="inline w-5 h-5 text-gray-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><rect x="4" y="8" width="16" height="10" rx="2" stroke="currentColor" stroke-width="2" fill="none"/><path d="M8 8V6a4 4 0 1 1 8 0v2" stroke="currentColor" stroke-width="2" fill="none"/></svg>
            {/if}
            {name}
        </span>
        <span class="text-gray-500 text-sm">{date}</span>
    </div>
</a>