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

    /**
     * Placeholder for a cover + two-line row list (bookmarks, history, tagged
     * pages). Reserves the list height so rows swap in without a shift.
     */
    let {
        count = 6,
        coverWidth = '64px',
        testid = 'list-row-skeleton'
    }: { count?: number; coverWidth?: string; testid?: string } = $props();
</script>

<ul class="list" data-testid={testid} aria-hidden="true">
    {#each Array(count) as _}
        <li class="row" style="grid-template-columns: {coverWidth} 1fr;">
            <Skeleton width={coverWidth} aspectRatio="2 / 3" radius="sm" />
            <div class="meta">
                <Skeleton variant="text" width="55%" radius="sm" />
                <Skeleton variant="text" width="35%" 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;
        gap: var(--space-3);
        align-items: center;
    }

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