<script lang="ts">
  interface Event {
    name: string;
    date: string;
    created_at: string;
    sheet_id: string;
  }

  let { event, loading, error } = $props<{
    event: Event | null;
    loading: boolean;
    error: string;
  }>();

  function formatDate(dateString: string) {
    return new Date(dateString).toLocaleDateString('en-GB', {
      day: '2-digit',
      month: '2-digit',
      year: 'numeric'
    });
  }
</script>

<div class="mb-4 rounded-lg border border-gray-300 bg-white p-6">
  {#if loading}
    <!-- Loading placeholder with header -->
    <div>
      <h2 class="mb-4 text-2xl font-semibold text-gray-900">Event Information</h2>
      <div class="space-y-3">
        <div class="flex items-center">
          <span class="w-20 text-sm font-medium text-gray-500">Date:</span>
          <div class="h-4 w-1/4 animate-pulse rounded bg-gray-200"></div>
        </div>
        <div class="flex items-center">
          <span class="w-20 text-sm font-medium text-gray-500">Created:</span>
          <div class="h-4 w-1/3 animate-pulse rounded bg-gray-200"></div>
        </div>
        <div class="flex items-center">
          <span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
          <div class="h-4 w-1/2 animate-pulse rounded bg-gray-200"></div>
        </div>
      </div>
    </div>
  {:else if event}
    <div>
      <h2 class="mb-4 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">{formatDate(event.date)}</span>
        </div>
        <div class="flex items-center">
          <span class="w-20 text-sm font-medium text-gray-500">Created:</span>
          <span class="text-sm text-gray-900">{formatDate(event.created_at)}</span>
        </div>
        <div class="flex items-center">
          <span class="w-20 text-sm font-medium text-gray-500">Sheet ID:</span>
          <a
            href={`https://docs.google.com/spreadsheets/d/${event.sheet_id}`}
            target="_blank"
            rel="noopener noreferrer"
            class="inline-flex items-center rounded bg-green-100 px-2 py-1 text-xs font-medium text-green-800 transition hover:bg-green-200"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="mr-1 h-3 w-3"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
              />
            </svg>
            Open in Google Sheets
          </a>
        </div>
      </div>
    </div>
  {:else if error}
    <div class="py-8 text-center">
      <p class="text-red-600">{error}</p>
    </div>
  {/if}
</div>
