import { blogPosts } from '@/lib/blog';
import Navbar from '@/components/Navbar';
import Footer from '@/components/Footer';
import PostContent from './PostContent';
import styles from './PostPage.module.css';
import Link from 'next/link';

export async function generateStaticParams() {
  return blogPosts.map((post) => ({
    slug: post.slug,
  }));
}

export default async function BlogPostDetail({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = blogPosts.find((p) => p.slug === slug);

  if (!post) {
    return (
      <div className={styles.notFound}>
        <h1>POST NOT FOUND</h1>
        <Link href="/blog">RETURN TO HUB</Link>
      </div>
    );
  }

  return (
    <main className={styles.main}>
      <Navbar />
      <PostContent post={post} slug={slug} />
      <Footer />
    </main>
  );
}