<script lang="ts">
  let { 
    loading,
    totalCount,
    scannedCount,
    emailSentCount,
    pendingCount 
  } = $props<{
    loading: boolean;
    totalCount: number;
    scannedCount: number;
    emailSentCount: number;
    pendingCount: number;
  }>();
</script>

<div class="overflow-x-auto">
  <table class="min-w-full">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-4 py-2 text-left text-sm font-medium text-gray-700">Category</th>
        <th class="px-4 py-2 text-right text-sm font-medium text-gray-700">Count</th>
      </tr>
    </thead>
    <tbody>
      <!-- Total participants -->
      <tr class="border-b border-gray-100">
        <td class="px-4 py-3">
          <div class="flex items-center gap-2">
            <svg
              class="inline h-4 w-4 text-blue-600"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              viewBox="0 0 24 24"
            >
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none" />
            </svg>
            <span class="text-sm font-medium text-gray-700">Total participants</span>
          </div>
        </td>
        <td class="px-4 py-3 text-right">
          {#if loading}
            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
          {:else}
            <span class="font-semibold text-gray-900">{totalCount}</span>
          {/if}
        </td>
      </tr>
      
      <!-- Scanned participants -->
      <tr class="border-b border-gray-100">
        <td class="px-4 py-3">
          <div class="flex items-center gap-2">
            <svg
              class="inline h-4 w-4 text-green-600"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
            </svg>
            <span class="text-sm font-medium text-gray-700">Scanned participants</span>
          </div>
        </td>
        <td class="px-4 py-3 text-right">
          {#if loading}
            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
          {:else}
            <span class="font-semibold text-gray-900">{scannedCount}</span>
          {/if}
        </td>
      </tr>
      
      <!-- Email sent participants -->
      <tr class="border-b border-gray-100">
        <td class="px-4 py-3">
          <div class="flex items-center gap-2">
            <svg
              class="inline h-4 w-4 text-blue-600"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
            </svg>
            <span class="text-sm font-medium text-gray-700">Email sent</span>
          </div>
        </td>
        <td class="px-4 py-3 text-right">
          {#if loading}
            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
          {:else}
            <span class="font-semibold text-gray-900">{emailSentCount}</span>
          {/if}
        </td>
      </tr>
      
      <!-- Pending participants -->
      <tr>
        <td class="px-4 py-3">
          <div class="flex items-center gap-2">
            <svg
              class="inline h-4 w-4 text-amber-500"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              viewBox="0 0 24 24"
            >
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span class="text-sm font-medium text-gray-700">Pending emails</span>
          </div>
        </td>
        <td class="px-4 py-3 text-right">
          {#if loading}
            <div class="ml-auto h-4 w-10 bg-gray-200 rounded animate-pulse"></div>
          {:else}
            <span class="font-semibold text-gray-900">{pendingCount}</span>
          {/if}
        </td>
      </tr>
    </tbody>
  </table>
</div>
