<script>
    import useSettings from "$lib/useSettings.svelte.js";
    import { loading } from "$lib/stores.js";

    let { posts = [] } = $props();
    const settings = useSettings();
</script>

<div class="grid gap-3" style={`grid-template-columns: repeat(${settings.imageGridColumns}, minmax(0, 1fr))`}>
    {#each posts as post}
        <a href={`/posts/${post.id}`} class="card p-3 flex flex-col justify-end items-center" onclick={() => {
            loading.set(true);
        }}>
            <header class="card-header p-0"></header>
            <section class="flex flex-col">
                <img src={post[settings.postGridPreviewQuality].url}
                     loading="lazy"
                     alt={`Post ${post.id}`} />
                <div class="bg-black px-2 py-1">
                    <p class="text-center text-dark-token">{post.id} {post.file.ext} {post.rating}</p>
                </div>
            </section>
        </a>
    {/each}
</div>
