import { MainLayout } from "@/layout/MainLayout/MainLayout";
import { notFound } from "next/navigation";
import Markdown from 'react-markdown';
import rehypeRaw from "rehype-raw";

export default async function Home({
  params
}:{
  params: {
    slug: string
  }
}) {
  const blog = await fetch(`https://blog.abtmtr.link/api/collections/mtr/posts/${params.slug}`, { cache: 'no-store' }).then(x=>x.json());
  if (blog.data == null)
    return notFound();
  return (
    <MainLayout currentPage={`/blog/${params.slug}`} title="Blog" subtitle="via blog.abtmtr.link" backButton>
      <h1>{blog.data.title}</h1>
      <p><small>Posted {new Date(blog.data.created).toLocaleString()} - {blog.data.views} views</small></p>
      <div style={{
        margin: "16px 0"
      }}>
      <Markdown rehypePlugins={[rehypeRaw]}>{blog.data.body}</Markdown>
      </div>
    </MainLayout>
  )
}
