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

    /**
     * Placeholder for a tagged-page / chapter / manga results list while a
     * search re-queries. Mirrors the TaggedPageRow shape (56px 2/3 cover +
     * two text lines) so the list keeps its height as results swap in.
     */
    let { count = 6, testid = 'search-results-skeleton' }: { count?: number; testid?: string } =
        $props();
</script>

<ul class="list" data-testid={testid} aria-hidden="true">
    {#each Array(count) as _}
        <li class="row">
            <Skeleton width="56px" aspectRatio="2 / 3" radius="sm" />
            <div class="meta">
                <Skeleton variant="text" width="60%" radius="sm" />
                <Skeleton variant="text" width="40%" radius="sm" />
            </div>
        </li>
    {/each}
</ul>

<style>
    .list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .row {
        display: grid;
        grid-template-columns: 56px 1fr;
        gap: var(--space-3);
        align-items: center;
    }

    .meta {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        min-width: 0;
    }
</style>
