<script lang="ts">
  const shimmer = 'animate-pulse bg-surface';
</script>

<div data-testid="search-skeleton" class="space-y-6">
  <section>
    <div class="mb-2 h-5 w-24 rounded {shimmer}"></div>
    <div class="divide-y divide-border">
      {#each Array.from({ length: 4 }) as _, i (i)}
        <div class="flex items-center gap-3 px-3 py-3">
          <span class="h-10 w-10 rounded-full {shimmer}"></span>
          <span class="h-4 flex-1 rounded {shimmer}"></span>
          <span class="h-3 w-20 rounded {shimmer}"></span>
        </div>
      {/each}
    </div>
  </section>

  <section>
    <div class="mb-2 h-5 w-24 rounded {shimmer}"></div>
    <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
      {#each Array.from({ length: 5 }) as _, i (i)}
        <div>
          <div class="aspect-square w-full rounded {shimmer}"></div>
          <div class="mt-2 h-4 w-3/4 rounded {shimmer}"></div>
          <div class="mt-1 h-3 w-1/3 rounded {shimmer}"></div>
        </div>
      {/each}
    </div>
  </section>

  <section>
    <div class="mb-2 h-5 w-24 rounded {shimmer}"></div>
    <div class="space-y-2">
      {#each Array.from({ length: 6 }) as _, i (i)}
        <div class="h-6 w-full rounded {shimmer}"></div>
      {/each}
    </div>
  </section>
</div>
