<script lang="ts">
  let { 
    loading,
    totalParticipants,
    scannedParticipants
  } = $props<{
    loading: boolean;
    totalParticipants: number;
    scannedParticipants: 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">{totalParticipants}</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">{scannedParticipants}</span>
          {/if}
        </td>
      </tr>
    </tbody>
  </table>
</div>
