import { getPostBySlug, getAllPosts } from "@/lib/api"
import { notFound } from "next/navigation"
import type { Metadata } from "next"
import Link from "next/link"
import { ArrowLeft } from "lucide-react"
import { Suspense } from "react"
import { MDXContent } from "@/components/mdx-content"

export function generateStaticParams() {
  const posts = getAllPosts()
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

export function generateMetadata({ params }: { params: { slug: string } }): Metadata {
  const post = getPostBySlug(params.slug)

  if (!post) {
    return {
      title: "Post Not Found",
    }
  }

  return {
    title: post.metadata.title,
    description: post.metadata.excerpt,
  }
}

export default function Post({ params }: { params: { slug: string } }) {
  const post = getPostBySlug(params.slug)

  if (!post) {
    notFound()
  }

  return (
    <article className="prose prose-invert max-w-none">
      <Link
        href="/"
        className="inline-flex items-center text-muted-foreground hover:text-primary mb-8 no-underline transition-colors"
      >
        <ArrowLeft className="mr-2 h-4 w-4" />
        Back to all posts
      </Link>

      <header className="mb-8">
        <h1 className="text-4xl font-bold tracking-tight mb-2 bg-gradient-to-r from-purple-400 to-pink-600 bg-clip-text text-transparent">
          {post.metadata.title}
        </h1>
        <time dateTime={post.metadata.date} className="text-muted-foreground">
          {new Date(post.metadata.date).toLocaleDateString("en-US", {
            year: "numeric",
            month: "long",
            day: "numeric",
          })}
        </time>
      </header>

      <div className="post-content">
        <Suspense fallback={<div>Loading content...</div>}>
          <MDXContent content={post.content} />
        </Suspense>
      </div>
    </article>
  )
}