import EmptyContent from "@/src/components/lib/elements/EmptyContent";
import Section from "@/src/components/lib/layout/Section";
import { AppContext } from "@/src/pages/__root";
import React from "react";
import BlogPostsListCard from "./BlogPostsListCard";
import Stack from "@/src/components/lib/layout/Stack";
import Divider from "@/src/components/lib/layout/Divider";
import LucideIcon from "@/src/components/lib/elements/lucide-icon";

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

    if (!blogPosts?.[0]) {
        return (
            <>
                <Divider />
                <Section>
                    <EmptyContent
                        title={`No Blog Posts at this moment`}
                        borderProps={{ className: "p-10 xl:p-20" }}
                        icon={<LucideIcon name="NotebookPen" />}
                    />
                </Section>
            </>
        );
    }

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