<script lang="ts">
  type Variant = 'list' | 'grid' | 'album';
  let { variant, count = 12 }: { variant: Variant; count?: number } = $props();

  // Common shimmer class applied to every placeholder block.
  const shimmer = 'animate-pulse bg-surface';
</script>

{#if variant === 'list'}
  <div data-testid="skeleton-list" class="divide-y divide-border">
    {#each Array.from({ length: count }) as _, i (i)}
      <div data-skeleton-row 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>
{:else if variant === 'grid'}
  <div
    data-testid="skeleton-grid"
    class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
  >
    {#each Array.from({ length: count }) as _, i (i)}
      <div data-skeleton-card>
        <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>
{:else}
  <div data-testid="skeleton-album" class="space-y-6">
    <div class="flex flex-col gap-4 md:flex-row md:items-end">
      <div data-testid="skeleton-album-cover" class="h-60 w-60 rounded {shimmer}"></div>
      <div class="flex-1 space-y-3">
        <div class="h-8 w-3/4 rounded {shimmer}"></div>
        <div class="h-4 w-1/3 rounded {shimmer}"></div>
        <div class="h-4 w-1/4 rounded {shimmer}"></div>
      </div>
    </div>
    <div class="space-y-2">
      {#each Array.from({ length: 10 }) as _, i (i)}
        <div class="h-6 w-full rounded {shimmer}"></div>
      {/each}
    </div>
  </div>
{/if}
