"use client";
import { BanniereGlobale } from "@/ui/components/gobal/banniere";
import {
  Card,
  CardHeader,
  CardBody,
  Typography,
  CardFooter,
  Button,
} from "@material-tailwind/react";
import { Blog } from "@/api/blog.api";
import React, { useEffect, useState } from "react";
import { Skeleton } from "@/ui/loader/skeleton";

import Link from "next/link";
export default function BlogPage() {
  const [post, setPost] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  useEffect(() => {
    const getData = async () => {
      const response = await Blog.getPost()
        .then((res) => {
          setPost(res);
          console.log(res);
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          setIsLoading(false);
        });
    };
    getData();
  }, []);
  return (
    <>
      <BanniereGlobale titre="Blog" />
      <div className="container mx-auto py-10">
        <div className="grid md:grid-cols-2 gap-8 xl:grid-cols-3 items-center justify-center">
          {!isLoading ? (
            post.map((blog: any, index) => (
              <Card key={index} className="mt-6">
                <CardHeader color="blue-gray" className="relative h-52">
                  <img src={blog.img_url} alt="card-image" />
                </CardHeader>
                <CardBody>
                  <Link href={"/blog/" + blog.slug}>
                    <h5
                      className="mb-2 lg:line-clamp-2 text-vert_fonce font-bold text-xl "
                      dangerouslySetInnerHTML={{ __html: blog.title.rendered }}
                    >
                      {/* {convertHTML(blog.title.rendered)} */}
                    </h5>
                  </Link>
                  <div
                    dangerouslySetInnerHTML={{ __html: blog.excerpt.rendered }}
                    className="line-clamp-3"
                  ></div>
                </CardBody>
                <CardFooter className="pt-0">
                  <Link href={"/blog/" + blog.slug}>
                    <Button className="bg-vert_fonce hover:bg-red-800">
                      En savoir plus
                    </Button>
                  </Link>
                </CardFooter>
              </Card>
            ))
          ) : (
            <>
              <Skeleton />
              <Skeleton />
              <Skeleton />
            </>
          )}
        </div>
      </div>
    </>
  );
}