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"
import Footer from "@/components/Footer"

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

  console.log("blogs", postMetadata.length)
  const postPreviews = postMetadata
    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
    .map(post => <BlogCard key={post.slug} {...post} />)
  return (
    <main
      id="content"
      role="main"
      className="h-full flex-grow flex flex-col bg-base-100"
    >
      <Background>
        {/*  Page sections */}
        <PageHeader
          title="Blogs"
          subtitle={
            <>
              {" "}
              <h2 className="text-base-content text-2xl font-medium text-center max-w-5xl mx-auto px-6">
                Take a look as we show you how to make a great PocketBase +
                React App
              </h2>
            </>
          }
        />
        <div className="max-w-6xl mx-auto mb-auto pb-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-base-content ">
            {postPreviews}
          </div>
        </div>
        <Footer />
      </Background>
    </main>
  )
}