---
    import Layout from "../../layouts/Layout.astro";
    import Divider from "../../components/misc/Divider.astro";
    import BlogProjectCard from "../../components/misc/BlogProjectCard.astro";

    export async function getStaticPaths({ paginate }: { paginate: any }) {
        const posts = (await Astro.glob("./*.{md,mdx}")).sort(
            (a, b) =>
                new Date(b.frontmatter.date).valueOf() -
                new Date(a.frontmatter.date).valueOf()
        );

        return paginate(posts, { pageSize: 10 });
    }

    const { page } = Astro.props;
---

<Layout title=" | Blog">
    <main class="w-1/2 md:w-4/5 lg:w-4/5 xl:w-4/5 2xl:w-1/2 mx-auto mt-4">
        <div class="flex flex-col">
            {
            page.data.map((post: any) => (
            <BlogProjectCard title={post.frontmatter.title} subtitle={post.frontmatter.tagline}
                image={post.frontmatter.image} link={post.url}/>
            <Divider />
            ))
            }
        </div>
        <div class="w-1/2 mx-auto flex justify-between">
            {
            page.url.prev ? (
            <a class="w-40 flex" href={page.url.prev}>
                <span class="material-symbols-outlined">
                    chevron_left
                </span>
                <p>Previous Page</p>
            </a>
            ) : (
            <div class="w-40" />
            )
            }

            <p class="grow text-center whitespace-nowrap">Page {page.currentPage}</p>
            {
            page.url.next ? (
            <a class="w-40 flex" href={page.url.next}>
                <p class="grow text-right">Next Page</p>
                <span class="material-symbols-outlined">
                    chevron_right
                </span>
            </a>
            ) : (
            <div class="w-40" />
            )
            }
        </div>
    </main>
</Layout>