import { notFound } from "next/navigation";
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { PageHero } from "@/components/PageShared";
import { ArticleDetailView } from "@/components/ArticleDetail";
import { articlesFallback } from "@/data/articles";
import { getBlog } from "@/lib/meshkee";

type PageProps = {
  params: Promise<{ slug: string }>;
};

export async function generateStaticParams() {
  return articlesFallback.map((item) => ({ slug: item.slug }));
}

export async function generateMetadata({ params }: PageProps) {
  const { slug } = await params;
  const { item } = await getBlog(slug);
  if (!item) {
    return { title: "مقاله | رسام تجارت هواران" };
  }
  return {
    title: `${item.title} | رسام تجارت هواران`,
    description: item.excerpt || item.title,
  };
}

export default async function ArticleDetailPage({ params }: PageProps) {
  const { slug } = await params;
  const { item } = await getBlog(slug);
  if (!item) notFound();

  return (
    <>
      <Header />
      <main>
        <PageHero
          title={item.title}
          titleEn="ARTICLE"
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "مقالات", href: "/articles" },
            { label: "جزئیات مقاله", href: `/articles/${item.slug}` },
          ]}
        />
        <ArticleDetailView item={item} />
      </main>
      <Footer />
    </>
  );
}