import * as React from "react";

import BlogEntryCard from "./../components/BlogEntryCard.tsx";

export default function Home() {
  // A mock of what the data from the getBlogEntries JSON return would look like
  const blogEntries = [
    {
      blogImage:
        "https://git.cspark.dev/avatars/1c230bfe7494b1a62932d94ed8558dc61189437b1b6e0cecdb0c45c3d899bea4?size=512",
      blogTitle: "Test Blog Entry 1",
      blogDatePosted: "12/04/2024 4PM", // In reality this would probably be an actual correct format/standardised timestamp
      blogDescription: "This is a first blog entry test", // If no description, we'd want to get a small snippet of the intro of the blog
    },
    {
      blogImage:
        "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
      blogTitle: "Test Blog Entry 2",
      blogDatePosted: "8/04/2024 6PM", // In reality this would probably be an actual correct format/standardised timestamp
      blogDescription: "This is a test blog entry number 2", // If no description, we'd want to get a small snippet of the intro of the blog
    },
  ];

  return (
    <>
      <div className="blogEntryGrid">
        {blogEntries.map((item, index) => (
          <BlogEntryCard
            key={index}
            blogImage={item["blogImage"]}
            blogTitle={item["blogTitle"]}
            blogDatePosted={item["blogDatePosted"]}
            blogDescription={item["blogDescription"]}
          ></BlogEntryCard>
        ))}
      </div>
    </>
  );
}
