import PageHeader from "@/sections/PageHeader";
import BlogCard from "@/components/BlogCard";
import getPostMetadata from "@/utils/getPostMetaData";
import React from "react";
import Background from "@/components/Utilities/Background";

export default async function BlogsPage() {
  const postMetadata = await getPostMetadata();

  const postPreviews = postMetadata
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
    .map((post) => <BlogCard key={post.slug} {...(post as any)} />);
  return (
    <main
      id="content"
      role="main"
      className="h-full flex-grow flex flex-col bg-white dark:bg-black"
    >
      <Background>
        {/*  Page sections */}
        <PageHeader
          title="Blogs"
          subtitle={
            <>
              {" "}
              <h2 className="text-black dark:text-white font-bold text-2xl lg:text-3xl text-center max-w-5xl mx-auto px-6">
                Join us for the journey as we make great food. Learn and grow
                together
              </h2>
            </>
          }
        />
        <div className="max-w-6xl mx-auto mb-24 h-full w-full py-12 px-8">
          <div className="w-full flex items-start justify-center flex-row flex-wrap gap-x-8 gap-y-8 md:gap-8 text-black dark:text-white">
            {postPreviews}
          </div>
        </div>
      </Background>
    </main>
  );
}