import { notFound } from "next/navigation";
import { CalendarDays } from "lucide-react";
import { prisma } from "@/lib/prisma";

export default async function ArticleDetailPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  const articleId = Number(id);

  if (Number.isNaN(articleId)) {
    notFound();
  }

  const article = await prisma.article.findUnique({
    where: { id: articleId },
  });

  if (!article) {
    notFound();
  }

  const formattedDate = article.publishedAt
    ? new Intl.DateTimeFormat("id-ID", {
        day: "numeric",
        month: "long",
        year: "numeric",
      }).format(article.publishedAt)
    : null;

  return (
    <section className="bg-bg-white py-24">
      <article className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
        {article.label && (
          <span className="rounded-full bg-merah-ranata px-3 py-1 text-xs font-semibold text-white">
            {article.label}
          </span>
        )}
        <h1 className="mt-4 text-3xl font-semibold text-heading md:text-4xl">
          {article.title}
        </h1>
        {formattedDate && (
          <p className="mt-3 flex items-center gap-1 text-sm text-muted">
            <CalendarDays className="h-4 w-4" />
            {formattedDate}
          </p>
        )}

        {article.imageUrl && (
          <div className="relative mt-8 aspect-[16/9] overflow-hidden rounded-2xl">
            <img
              src={article.imageUrl}
              alt={article.title}
              className="h-full w-full object-cover"
            />
          </div>
        )}

        {article.content ? (
          <div
            className="article-content mt-8"
            dangerouslySetInnerHTML={{ __html: article.content }}
          />
        ) : (
          article.excerpt && <p className="mt-8 text-body">{article.excerpt}</p>
        )}
      </article>
    </section>
  );
}