/**
 * @copyright nhcarrigan
 * @license Naomi's Public License
 * @author Naomi Carrigan
 */

import type { JSX } from "react";
import { Rule } from "@/components/rule";
import { getSortedPostsData } from "@/lib/posts";

/**
 * Renders the home page.
 * @returns JSX component.
 */
const Home = (): JSX.Element => {
  const posts = getSortedPostsData();
  return (
    <main>
      <h1>{"Blog"}</h1>
      <p>{"Welcome to the musings of a transfem software engineer!"}</p>
      {posts.map((post) => {
        return <div key={post.slug}>
          <Rule />
          <h2><a className="underline" href={`/post/${post.slug}`}>{post.data.title}</a></h2>
          <p className="italic text-center">{post.data.date.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" })}</p>
          <p>{post.data.summary}</p>
        </div>;
      })}
    </main>
  );
};

export default Home;