import fs from "fs";
import matter from "gray-matter";
import BlogContent from "@/sections/BlogContent";
import Link from "next/link";
import Image from "next/image";
import xButton from "@/images/icon-x.svg";
import getPostMetadata from "@/utils/getPostMetaData";
import { headers } from "next/headers";
import React from "react";
import Icon from "@/components/icon";
import Spacer from "@/components/Utilities/Spacer";

const getPostContent = (slug: string) => {
  const folder = "blogs/";
  const file = `${folder}${slug}.md`;
  const content = fs.readFileSync(file, "utf8");
  const matterResult = matter(content);
  return matterResult;
};

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}) {
  const { slug } = params;
  const headersList = headers();
  const siteURL = headersList.get("host");
  const post = getPostContent(slug);

  return {
    title: `${post.data.title}`,
    description: `${post.data.subtitle}`,
    alternates: {
      canonical: `https://${siteURL}/blogs/${slug}`,
    },
  };
}

export const generateStaticParams = async () => {
  const posts = getPostMetadata();
  return posts.map((post) => ({
    slug: post.slug,
  }));
};

const PostPage = (props: any) => {
  const slug = props.params.slug;
  const post = getPostContent(slug);
  const showModal = props.searchParams?.modal;
  return (
    <div className="flex flex-col h-full w-full bg-white dark:bg-black px-8 md:max-w-3xl md:mx-auto">
      <Spacer className="pt-32" />
      <BlogContent post={post} />
    </div>
  );
};

export default PostPage;
