import * as React from "react";
import BlogEntryCard from "./components/BlogEntryCard.tsx";

export default function App() {
  // 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 (
    <main>
      {blogEntries.map((item, index) => (
        <BlogEntryCard
          key={index}
          blogImage={item["blogImage"]}
          blogTitle={item["blogTitle"]}
          blogDatePosted={item["blogDatePosted"]}
          blogDescription={item["blogDescription"]}
          className="col"
        ></BlogEntryCard>
      ))}
    </main>
  );
}