import { DataFormation } from '@/api/data-formation.api';
import { Button } from '@material-tailwind/react';
import Link from 'next/link';
import React, { useEffect, useState } from 'react'
import { CardFormation } from './card-formation';
import { Course } from '@/api/cours.api';

  
export default function LastCourse() {
 const [cour, setCour] = useState([]);

 useEffect(() => {
   const getData = async () => {
     const res = await Course.getAll();
     setCour(res);
   };
   getData();
 }, []);
  return (
    <div className="px-10 xl:px-28 py-4">
      <div className="flex flex-col items-center gap-10">
        <h1 className="text-vert_fonce font-bold text-text_title mb-4">
          Nos formations récentes
        </h1>
        <div className="grid lg:grid-cols-2   gap-10">
          {cour &&
            cour.map((items, index) => (
              <CardFormation key={index} item={items} />
            ))}
        </div>
        <div className="flex items-center justify-center">
          <Link href={"/formation"}>
            <button className="bg-vert_fonce text-xl  hover:bg-jaune_vif hover:shadow-lg transition hover:translate-y-1 py-3 px-5 rounded-full text-white font-bold">
              Voir toutes nos formations
            </button>
          </Link>
        </div>
      </div>
    </div>
  );
}