import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";
import { Container } from "@/components/Container";
import { Placeholder } from "@/components/Placeholder";
import { ProductTabs } from "@/components/product/ProductTabs";
import { blogImage, fetchBlog } from "@/lib/blog";
import { fetchComments } from "@/lib/comments";
import { formatFaDate } from "@/lib/format";

export const revalidate = 60;

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;
  const post = await fetchBlog(slug);
  return { title: post ? `${post.title} | مجله سلامت` : "مقاله" };
}

export default async function BlogDetailsPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = await fetchBlog(slug);
  if (!post) notFound();
  const comments = await fetchComments("blog", post.id);

  return (
    <article className="pt-8">
      <Container className="max-w-3xl">
        <p className="text-[13px] text-muted">
          <Link href="/" className="hover:text-primary">خانه</Link>
          <span className="mx-2">/</span>
          <Link href="/blog" className="hover:text-primary">مجله سلامت</Link>
        </p>
        <h1 className="mt-3 text-[24px] font-bold leading-10 text-navy">{post.title}</h1>
        <p className="mt-2 text-[13px] text-muted">{formatFaDate(post.publishedAt || post.createdAt)}</p>
        <div className="mt-5 overflow-hidden rounded-2xl bg-sky">
          <Placeholder src={blogImage(post)} alt={post.title} className="aspect-[16/8] w-full object-cover" />
        </div>
        {post.abstract ? <p className="mt-6 text-[15px] leading-8 text-ink">{post.abstract}</p> : null}
        {post.mainTextHtml ? (
          <div className="rich-text mt-6 text-[14px] leading-8 text-ink" dangerouslySetInnerHTML={{ __html: post.mainTextHtml }} />
        ) : null}
        <ProductTabs showDescription={false} comments={comments} />
      </Container>
    </article>
  );
}