<script lang="ts">
  interface ArchivedEvent {
    name: string;
    date: string;
  }

  let { event, loading } = $props<{
    event: ArchivedEvent | null;
    loading: boolean;
  }>();
</script>

<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
  <div class="flex flex-col gap-1">
    {#if loading}
      <div class="h-6 w-40 bg-gray-200 rounded animate-pulse mb-2"></div>
      <div class="h-4 w-24 bg-gray-100 rounded animate-pulse"></div>
    {:else}
      <h2 class="mb-2 text-2xl font-semibold text-gray-900">{event?.name}</h2>
      <div class="space-y-3">
        <div class="flex items-center">
          <span class="w-20 text-sm font-medium text-gray-500">Date:</span>
          <span class="text-sm text-gray-900">{event?.date}</span>
        </div>
      </div>
    {/if}
  </div>
</div>
