<svelte:options runes={true} />

<script>
    import ViewCard from "$lib/components/custom/Views/ViewCard.svelte";
    import {Skeleton} from "$lib/components/ui/skeleton";
    let {albums, updateScroll, selectAlbum} = $props();
    let self = $state();
</script>

<div class="border border-2 flex flex-row flex-wrap gap-2 p-2 h-fit max-h-full items-start justify-start overflow-y-auto" bind:this={self} onscroll={() => updateScroll(self)}>
    {#if albums.loading}
        {#each [...Array(20).keys()] as i}
            <Skeleton id={"album-skeleton-" + i} class="rounded-md w-56 h-72 border border-2 bg-background" />
        {/each}
    {:else}
        {#each albums.list as album}
            <ViewCard data={album} onselectalbum={selectAlbum}/>
        {/each}
    {/if}
</div>