import EmptyContent from "@/components/lib/elements/EmptyContent";
import Section from "@/components/lib/layout/Section";
import { AppContext } from "@/pages/_app";
import React from "react";
import BlogPostsListCard from "./BlogPostsListCard";
import Stack from "@/components/lib/layout/Stack";

export default function BlogPostsList() {
    const { pageProps } = React.useContext(AppContext);
    const { blogPosts } = pageProps;

    if (!blogPosts?.[0]) {
        return <EmptyContent title={`No Blog Posts at this moment`} />;
    }

    return (
        <Section className="!mt-0 !pt-0">
            <Stack className="w-full">
                {blogPosts.map((post, index) => {
                    return <BlogPostsListCard post={post} key={index} />;
                })}
            </Stack>
        </Section>
    );
}