salar-store/app/blog/[id]/[slug]/page.tsx

import type { Metadata } from "next";
import { notFound, permanentRedirect } from "next/navigation";
import { Media } from "@/components/Media";
import { PageHero } from "@/components/PageHero";
import { RichContent } from "@/components/RichContent";
import { getBlogById } from "@/lib/api";
import { formatDate } from "@/lib/format";
import { PLACEHOLDER } from "@/lib/data";
import { blogHref, blogTitleSlug } from "@/lib/paths";
import { SITE } from "@/lib/site";

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { id } = await params;
  try {
    const blog = await getBlogById(id);
    if (!blog) return { title: SITE.nameFa };
    return {
      title: `${blog.title} | ${SITE.nameFa}`,
      description: blog.abstract?.trim() || SITE.aboutShort,
      alternates: { canonical: blogHref(blog) },
    };
  } catch {
    return { title: SITE.nameFa };
  }
}

export default async function BlogDetailPage({ params }: Props) {
  const { id, slug } = await params;
  const blog = await getBlogById(id);
  if (!blog) notFound();

  if (decodeURIComponent(slug) !== blogTitleSlug(blog.title)) {
    permanentRedirect(blogHref(blog));
  }

  const author = [blog.author?.firstName, blog.author?.lastName].filter(Boolean).join(" ");

  return (
    <>
      <PageHero
        title={blog.title}
        english="Blog"
        crumbs={[{ name: "وبلاگ", href: "/blog" }, { name: blog.title }]}
      />
      <article className="container-site py-10 md:py-14">
        <Media
          src={blog.titleImageUrl || PLACEHOLDER.blog}
          alt={blog.title}
          className="aspect-[16/7] rounded-2xl"
          sizes="1200px"
          priority
        />
        <div className="mt-6 flex flex-wrap gap-3 text-sm text-zinc-400">
          {blog.publishedAt || blog.createdAt ? <time>{formatDate(blog.publishedAt || blog.createdAt || "")}</time> : null}
          {blog.categoryName ? <span>{blog.categoryName}</span> : null}
          {author ? <span>{author}</span> : null}
        </div>
        {blog.abstract ? <p className="mt-4 text-zinc-600 leading-8">{blog.abstract}</p> : null}
        <div className="mt-8">
          <RichContent html={blog.mainTextHtml} />
        </div>
      </article>
    </>
  );
}