import React, { useState } from "react";
import { Blog } from "@/api/blog.api";
import { BanniereGlobale } from "@/ui/components/gobal/banniere";
import convertHTML from "@/lib/convertHTML";
import Image from "next/image";
import { ArticlesRecent } from "@/ui/components/blog/articles-recent";

export async function generateStaticParams() {
  const post = await Blog.getPost().then((res) => res);
  const slugs: string[] = post.map((post: { slug: any }) => post.slug);
  return slugs;
}
export default async function Page({
  params,
}: {
  params: { article: string };
}) {
  const post = await Blog.getSinglePost(params.article)
    .then((res) => {
      return res[0];
    })
    .catch((error) => {
      console.log(error);
    });

  const newPost = await Blog.getNewPost()
    .then((res) => {
      return res;
    })
    .catch((error) => {
      console.log(error);
    })

  return (
    <>
      <BanniereGlobale titre={post.title.rendered} />
      <div className="container py-8 mx-auto lg:flex gap-10 px-8">
        <div className="w-full lg:w-2/3 flex flex-col gap-4">
          <Image
            src={post.img_url}
            className="rounded"
            width={800}
            height={800}
            alt={""}
          />
          <h1
            className="text-2xl text-pink-900 font-bold"
            dangerouslySetInnerHTML={{ __html: post.title.rendered }}
          ></h1>
          <div
            className="text-justify text-lg"
            dangerouslySetInnerHTML={{ __html: post.content.rendered }}
          ></div>
        </div>
        <div className=" lg:w-1/3">
          <div className="sticky top-32">
            <div className="h-10 w-full text-white bg-vert_fonce inline-flex p-4 items-center">
              <span>Articles réçents</span>
            </div>
            <ArticlesRecent post = {newPost} />
          </div>
        </div>
      </div>
    </>
  );
}