import { notFound } from "next/navigation";
import Image from "next/image";
import PageHeader from "@/components/PageHeader";
import { getArticle } from "@/lib/api/articles";
import { urlAsset } from "@/lib/utils/assets";
import styles from "./page.module.css";

async function chargerArticle(slug: string) {
  try {
    return await getArticle(slug);
  } catch {
    return null;
  }
}

export default async function ArticlePage({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const article = await chargerArticle(slug);

  if (!article) {
    notFound();
  }

  const date = new Date(article.publieLe).toLocaleDateString("fr-FR", {
    day: "numeric",
    month: "long",
    year: "numeric",
  });

  return (
    <main className={styles.page}>
      <PageHeader
        titre={article.titre}
        sousTitre={`${date} · ${article.auteur}`}
        fil={[{ label: "Blog", href: "/blog" }, { label: article.titre }]}
      />
      <div className={styles.inner}>
        {article.imageUrl && (
          <div className={styles.imageConteneur}>
            <Image
              src={urlAsset(article.imageUrl)}
              alt={article.titre}
              fill
              sizes="(min-width: 1024px) 800px, 90vw"
              className={styles.image}
              priority
            />
          </div>
        )}
        <div className={styles.contenu}>{article.contenu}</div>
      </div>
    </main>
  );
}