---
import { getPostUrlBySlug } from "@utils/url-utils";
import PostCard from "./PostCard.astro";

const { page } = Astro.props;

let delay = 0;
const interval = 50;
---
<div class="transition flex flex-col rounded-[var(--radius-large)] bg-[var(--card-bg)] py-1 md:py-0 md:bg-transparent md:gap-4 mb-4">
    {page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; updated: Date; }; slug: string; }) => {
        return (
            <PostCard
                    entry={entry}
                    title={entry.data.title}
                    tags={entry.data.tags}
                    category={entry.data.category}
                    published={entry.data.published}
                    updated={entry.data.updated}
                    url={getPostUrlBySlug(entry.slug)}
                    image={entry.data.image}
                    description={entry.data.description}
                    draft={entry.data.draft}
                    class:list="onload-animation"
                    style={`animation-delay: calc(var(--content-delay) + ${delay++ * interval}ms);`}
            ></PostCard>
        );
    })}
</div>