import { api } from "@/lib/api";
import { notFound } from "next/navigation";
import SiteShell from "@/components/SiteShell";
import BlogReadingProgress from "@/components/BlogReadingProgress";
import BlogDetailClient from "@/components/BlogDetailClient";

export default async function BlogDetailPage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  let post;
  let allPosts;
  try {
    [post, allPosts] = await Promise.all([api.getBlogPost(slug), api.getBlog()]);
  } catch {
    notFound();
  }

  const related = allPosts
    .filter((p) => p.slug !== slug && p.tags.some((tag) => post.tags.includes(tag)))
    .slice(0, 3);

  return (
    <SiteShell>
      <BlogReadingProgress />
      <BlogDetailClient post={post} related={related} />
    </SiteShell>
  );
}