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

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

  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">
      {/*  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">
              Find case studies and information for how Sign365 is giving
              businesses superpowers
            </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-12 text-black dark:text-white">
          {postPreviews}
        </div>
      </div>
    </main>
  );
}