import { notFound } from "next/navigation";
import Container from "@/components/ui/Container";
import { getBlogPostBySlug, resolveMediaUrl } from "@/lib/api";

export const revalidate = 300;

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = await getBlogPostBySlug(params.slug);
  if (!post) notFound();

  return (
    <section className="py-16">
      <Container className="max-w-3xl">
        {post.publishedAt ? (
          <p className="text-xs uppercase tracking-wide text-neutral-400">{post.publishedAt}</p>
        ) : null}
        <h1 className="font-display text-3xl sm:text-4xl text-neutral-900 mt-2">{post.title}</h1>
        {post.author ? <p className="mt-2 text-sm text-neutral-500">By {post.author}</p> : null}

        {post.coverImage ? (
          <div
            className="mt-8 h-72 rounded-xl2 bg-neutral-200 bg-cover bg-center"
            style={{ backgroundImage: `url(${resolveMediaUrl(post.coverImage)})` }}
          />
        ) : null}

        <div className="prose-allbets mt-8" dangerouslySetInnerHTML={{ __html: post.bodyHtml }} />
      </Container>
    </section>
  );
}