import { notFound } from "next/navigation";
import prisma from "@/lib/prisma";
import Link from "next/link";

export default async function ShowBlogPostPage({ params }: { params: Promise<{ id: string }> }) {
  const { id } = await params;
  const post = await prisma.blog.findUnique({
    where: { id: Number(id), user: { is: {} } },
    include: {
      user: { select: { id: true, username: true } },
    },
  });

  if (!post) notFound();

  return (
    <div className="max-w-2xl mx-auto">
      <article>
        <header className="mb-8">
          <h1 className="text-3xl font-bold text-text mb-3">{post.title}</h1>
          <div className="flex items-center gap-3 text-text-muted text-sm">
            <Link href={`/view/${post.user.id}`} className="text-primary hover:text-primary-dark">
              {post.user.username}
            </Link>
            <span>
              {post.created_at?.toLocaleDateString(undefined, {
                year: "numeric",
                month: "long",
                day: "numeric",
              })}
            </span>
          </div>
        </header>

        <div className="bg-surface rounded-lg p-6">
          <div className="text-text leading-relaxed whitespace-pre-wrap">{post.post}</div>
        </div>
      </article>

      <div className="mt-6">
        <Link href="/blog" className="text-text-muted hover:text-text text-sm">
          Back to blog
        </Link>
      </div>
    </div>
  );
}