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

    /**
     * Placeholder for the manga detail page while its data streams in. Mirrors
     * the desktop overview (cover + meta column) and the chapter list so the
     * page keeps its shape and swaps in without a big layout shift.
     */
    let { chapters = 6 }: { chapters?: number } = $props();
</script>

<div data-testid="manga-detail-skeleton" aria-hidden="true">
    <div class="overview">
        <div class="cover">
            <Skeleton aspectRatio="2 / 3" radius="md" />
        </div>
        <div class="meta">
            <Skeleton variant="text" width="70%" height="1.6rem" radius="sm" />
            <Skeleton variant="text" width="40%" radius="sm" />
            <div class="chips">
                {#each Array(4) as _}
                    <Skeleton width="72px" height="1.6rem" radius="pill" />
                {/each}
            </div>
            <Skeleton variant="text" width="100%" radius="sm" />
            <Skeleton variant="text" width="92%" radius="sm" />
            <Skeleton variant="text" width="60%" radius="sm" />
        </div>
    </div>

    <Skeleton variant="text" width="8rem" height="1.3rem" radius="sm" />
    <ol class="chapter-list">
        {#each Array(chapters) as _}
            <li><Skeleton variant="text" width="100%" height="1.1rem" radius="sm" /></li>
        {/each}
    </ol>
</div>

<style>
    .overview {
        display: grid;
        grid-template-columns: minmax(0, 200px) 1fr;
        gap: var(--space-4);
        align-items: start;
        margin-bottom: var(--space-6);
    }

    /* Match the real overview: stack on phones, but keep the cover from
       ballooning to full width. */
    @media (max-width: 640px) {
        .overview {
            grid-template-columns: minmax(0, 1fr);
        }
        .cover {
            max-width: 160px;
        }
    }

    .meta {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        min-width: 0;
    }

    .chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

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

    .chapter-list li {
        padding: var(--space-2) 0;
        border-top: 1px solid var(--border);
    }
</style>
