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

    /**
     * Placeholder for a horizontal home shelf (Continue reading / Recommended)
     * while it loads. Reserves the shelf's vertical space so the catalog below
     * doesn't get shoved down when the real shelf pops in after its late fetch.
     * Dimensions mirror ContinueReadingShelf's 108×162 cards.
     */
    let { count = 6, testid = 'shelf-skeleton' }: { count?: number; testid?: string } = $props();
</script>

<section class="shelf" data-testid={testid} aria-hidden="true">
    <Skeleton variant="text" width="10rem" height="1.1rem" radius="sm" />
    <ul class="track">
        {#each Array(count) as _}
            <li class="card">
                <Skeleton width="108px" height="162px" radius="sm" />
                <Skeleton variant="text" width="80%" radius="sm" />
            </li>
        {/each}
    </ul>
</section>

<style>
    .shelf {
        margin: 0 0 var(--space-5);
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }

    .track {
        list-style: none;
        display: flex;
        gap: var(--space-3);
        padding: 0 0 var(--space-2);
        margin: 0;
        overflow: hidden;
    }

    .card {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        width: 108px;
        flex: 0 0 auto;
    }
</style>
