import Navbar from '../../components/Navbar';
import Footer from '../../components/Footer';
import { GetStaticPaths, GetStaticProps } from 'next';
import { getAllNews, getNewsBySlug } from '../../lib/content';
import matter from 'gray-matter';
import { marked } from 'marked';

type Props = {
  title: string;
  date: string;
  html: string;
};

export default function NewsDetail({ title, date, html }: Props) {
  return (
    <div className="pt-16 bg-background">
      <Navbar />
      <main className="px-6 py-section">
        <article className="prose max-w-screen-md mx-auto">
          <h1>{title}</h1>
          <p><time className="text-sm text-gray-500">{date}</time></p>
          <div dangerouslySetInnerHTML={{ __html: html }} />
        </article>
      </main>
      <Footer />
    </div>
  );
}

export const getStaticPaths: GetStaticPaths = async () => {
  const list = getAllNews();
  return {
    paths: list.map(n => ({ params: { slug: n.slug } })),
    fallback: false,
  };
};

export const getStaticProps: GetStaticProps = async ({ params }) => {
  const slug = String(params?.slug || '');
  const data = getNewsBySlug(slug);
  if (!data) return { notFound: true };
  // content 已经由 gray-matter 解析，这里使用 marked 转为 HTML
  const html = marked.parse(data.content);
  return {
    props: {
      title: String(data.frontmatter.title || slug),
      date: String(data.frontmatter.date || ''),
      html,
    },
  };
};