<script lang="ts">
  import type { RequestAggregate } from '../../types';

  const {
    title,
    entries,
    emptyLabel
  }: {
    title: string;
    entries: RequestAggregate[];
    emptyLabel: string;
  } = $props();
</script>

<section class="rounded-3xl border border-white/10 bg-slate-900/80 p-6 shadow-xl shadow-slate-950/20 sm:p-8">
  <h3 class="text-xl font-semibold text-white">{title}</h3>
  {#if entries.length === 0}
    <div class="mt-6 rounded-2xl border border-dashed border-white/10 bg-slate-950/40 px-4 py-10 text-center text-slate-500">
      {emptyLabel}
    </div>
  {:else}
    <div class="mt-6 overflow-hidden rounded-2xl border border-white/10">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-white/10 text-left text-sm text-slate-300">
          <thead class="bg-white/5 text-xs uppercase tracking-[0.2em] text-slate-500">
            <tr>
              <th class="px-4 py-3 font-medium">Value</th>
              <th class="px-4 py-3 text-right font-medium">Requests</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-white/5 bg-slate-950/30">
            {#each entries as entry}
              <tr class="hover:bg-white/[0.03]">
                <td class="max-w-[40rem] truncate px-4 py-3 align-top"><code class="text-xs text-slate-200">{entry.key}</code></td>
                <td class="px-4 py-3 align-top text-right font-semibold text-white">{entry.request_count}</td>
              </tr>
            {/each}
          </tbody>
        </table>
      </div>
    </div>
  {/if}
</section>
