<script lang="ts">
    import Skeleton from './Skeleton.svelte';

    /**
     * Placeholder for a manga cover grid while it loads. Reuses the global
     * `.manga-grid` and `.manga-card` layout (both single-sourced in
     * tokens.css) so it lines up with the real grid at every breakpoint and
     * content swaps in without a layout shift. The cover reserves its 2/3 box
     * via `aspect-ratio` (height stays auto), matching MangaCard's cover.
     */
    let { count = 12 }: { count?: number } = $props();
</script>

<ul class="manga-grid" data-testid="manga-grid-skeleton" aria-hidden="true">
    {#each Array(count) as _}
        <li class="manga-card">
            <Skeleton aspectRatio="2 / 3" radius="md" />
            <Skeleton variant="text" width="80%" radius="sm" />
        </li>
    {/each}
</ul>
