import React from "react";
import DefaultLayout from "@/layouts/DefaultLayout/DefaultLayout";
import Article from "@/components/Article/Article";
import { fetchPosts, markdownToHtml } from "@/services/content-service";
import { FailedFetchPostError, FailedFetchPostsError } from "@/errors";

// export async function getStaticPaths () {
//   const res = await fetchPosts(['slug'], {
//     status: 'published'
//   })

//   if (!res.ok) {
//     throw new FailedFetchPostsError(await res.text())
//   }

//   const posts = (await res.json()).data

//   return {
//     paths: posts.map(post => ({
//       params: {
//         slug: post.slug
//       }
//     })),
//     fallback: true // false or "blocking"
//   }
// }

export const getServerSideProps = async ({ params }) => {
  const { slug } = params;
  const res = await fetchPosts([], {
    slug,
    status: "published",
  });

  if (!res.ok) {
    throw new FailedFetchPostError(slug, await res.text());
  }

  const post = (await res.json()).data.at(0);
  if (!post) {
    return {
      notFound: true,
    };
  }

  const { content } = post;
  const html = markdownToHtml(content);

  return {
    props: {
      post,
      html,
    },
  };
};

export default function WritingSingle({ post, html }) {
  return (
    <DefaultLayout>
      <Article {...post} html={html} />
    </DefaultLayout>
  );
}