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

import Markdown from "react-markdown";
import remarkGfm from "remark-gfm";
import type { JSX } from "react";
import { Rule } from "@/components/rule";
import { getPostData } from "@/lib/posts";

/**
 * Renders a blog post.
 * @param props - The properties of the page.
 * @param props.params - The path parameters.
 * @returns The JSX component.
 */
const Page = async({
  params,
}: {
  readonly params: Promise<{ slug: string }>;
}): Promise<JSX.Element> => {
  const { slug } = await params;
  const post = getPostData(slug);
  return (
    <main>
      <h1>{post.data.title}</h1>
      <p className="italic text-center">{`Published ${post.data.date.toLocaleDateString("en-GB", { day: "numeric", month: "long", weekday: "long", year: "numeric" })}`}</p>
      <Rule />
      <Markdown remarkPlugins={[ remarkGfm ]}>{post.content}</Markdown>
      <Rule />
      <a href="/">{"← Back to home"}</a>
    </main>
  );
};

export default Page;