import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Container } from "@/components/Container";
import { PageHero } from "@/components/layout/PageHero";
import { blogPosts, getBlogPost } from "@/lib/data";

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

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = getBlogPost(slug);
  if (!post) return { title: "مقاله" };
  return { title: post.title, description: post.excerpt };
}

export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = getBlogPost(slug);
  if (!post) notFound();

  return (
    <>
      <PageHero kicker="Blog" title={post.title} image={post.image} />
      <section className="py-16 sm:py-24">
        <Container className="max-w-3xl">
          <p className="font-latin text-[12px] tracking-[0.18em] text-muted">{post.date}</p>
          <div className="mt-8 space-y-5 text-[16px] leading-9 text-muted">
            {post.body.map((paragraph) => (
              <p key={paragraph}>{paragraph}</p>
            ))}
          </div>
          <Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
            بازگشت به مقالات
            <span className="h-px w-10 bg-brand" />
          </Link>
        </Container>
      </section>
    </>
  );
}