---
import MainGridLayout from "@layouts/MainGridLayout.astro";
import TitleCard from "@components/TitleCardNew.astro";
import Pagination from "@components/control/Pagination.astro";
import {getSortedPosts} from "@utils/content-utils";
import {getPostUrlBySlug} from "@utils/url-utils";

export async function getStaticPaths({ paginate }) {
    const allBlogPosts = await getSortedPosts();
    return paginate(allBlogPosts, { pageSize: 8 });
}

const {page} = Astro.props;

---

<MainGridLayout>
    <div class="flex flex-col gap-4 mb-4">
        {page.data.map((entry: { data: { draft: boolean; title: string; tags: string[]; category: string; published: Date; image: string; description: string; }; slug: string; }) => {
            return (
                <TitleCard
                    entry={entry}
                    title={entry.data.title}
                    tags={entry.data.tags}
                    category={entry.data.category}
                    published={entry.data.published}
                    url={getPostUrlBySlug(entry.slug)}
                    image={entry.data.image}
                    description={entry.data.description}
                    draft={entry.data.draft}
                ></TitleCard>

            );
        })}
    </div>
    <Pagination class="mx-auto" page={page}></Pagination>
</MainGridLayout>
