<script lang="ts">
    import MangaCard from '$lib/components/MangaCard.svelte';
    import type { MangaCard as MangaCardData } from '$lib/api/mangas';

    // Horizontal "Recommended for you" shelf for the homepage, fed by the
    // content-based /me/recommendations feed. Reuses the catalogue MangaCard.
    // Rendered only when there are recommendations (the homepage owns that
    // gate), so this has no empty state.
    let {
        mangas,
        testid = 'recommendations-shelf'
    }: {
        mangas: MangaCardData[];
        testid?: string;
    } = $props();
</script>

<section class="shelf" aria-label="Recommended for you" data-testid={testid}>
    <h2 class="shelf-title">Recommended for you</h2>
    <ul class="rec-track" data-testid="{testid}-list">
        {#each mangas as m (m.id)}
            <MangaCard manga={m} authors={m.authors} genres={m.genres} testid="rec-card-{m.id}" />
        {/each}
    </ul>
</section>

<style>
    .shelf {
        margin: 0 0 var(--space-5);
    }

    .shelf-title {
        font-size: var(--font-md);
        font-weight: var(--weight-semibold);
        margin: 0 0 var(--space-2);
    }

    .rec-track {
        list-style: none;
        display: flex;
        gap: var(--space-4);
        padding: 0 0 var(--space-2);
        margin: 0;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    /* MangaCard renders an <li class="manga-card">; in this horizontal
       scroller give each a fixed width instead of the grid's flexible track. */
    .rec-track > :global(.manga-card) {
        flex: 0 0 auto;
        width: 150px;
        scroll-snap-align: start;
    }
</style>
