import { notFound } from 'next/navigation'
import { MDXRemote } from 'next-mdx-remote/rsc'
import { getPosts, getPost, getReadingTime } from '@/lib/posts'
import { TableOfContents } from '@/components/blog/TableOfContents'

export async function generateStaticParams() {
  const posts = await getPosts()
  if (posts.length === 0) {
    return [{ slug: '__placeholder__' }]
  }
  return posts.map((post) => ({ slug: post.slug }))
}

export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
  const slug = (await params).slug
  const post = await getPost(slug)
  if (!post) return { title: 'Not Found' }
  return { title: `${post.title} | blog` }
}

export default async function PostPage({ params }: { params: Promise<{ slug: string }> }) {
  const slug = (await params).slug
  const post = await getPost(slug)

  if (!post) notFound()

  return (
    <div className="max-w-4xl mx-auto px-6 py-16">
      <div className="grid grid-cols-1 lg:grid-cols-[1fr_200px] gap-8">
        <article>
          <header className="mb-12">
            <time className="font-mono text-sm text-ink-soft">{post.date}</time>
            <h1 className="font-sans text-4xl font-extrabold tracking-tight lg:text-5xl mt-3 mb-2 text-ink">
              {post.title}
            </h1>
            <p className="font-mono text-xs text-ink-soft">
              {getReadingTime(post.title)} min read
            </p>
          </header>
          <div className="prose prose-lg max-w-none">
            <MDXRemote source={post.source} />
          </div>
        </article>
        <aside className="hidden lg:block">
          <TableOfContents />
        </aside>
      </div>
    </div>
  )
}