import {
  Avatar,
  Button,
  List,
  ListItem,
  ListItemPrefix,
  Typography,
} from "@material-tailwind/react";
import Image from "next/image";
import Link from "next/link";
import React from "react";

import { AcademicCapIcon } from "@heroicons/react/20/solid";

// interface CardFormationProps {
//   item: Formation;
//  // onSaveContext: (item:Formation)=>void;
// }
export const CardCatFormation = ({ item }, id) => {
  const handleSaveContext = () => {
    //onSaveContext(item);
  };

  return (
    <div className="group shadow-lg bg-white rounded-md hover:shadow-2xl transition-all">
      <div className="flex md:flex-row md:h-60  lg:h-[250px] flex-col">
        <div className="relative flex flex-col items-center justify-end h-96 md:h-full rounded-l-md md:w-2/5 bg-black overflow-hidden">
          <Image
            src={item.image}
            layout="fill"
            objectFit="cover"
            alt="une image de formation"
            className="rounded-l-md"
            loading="eager"
          />
          <div className="group-hover:bg-jaune_vif sm:bg-jaune_vif md:bg-transparent group-hover:outline-jaune_vif outline-white outline outline-1 transition duration-200 w-full relative text-white px-4 font-bold text-lg py-3 top-auto">
            <Link href={"/formation/" + item.slug}>{item.nom}</Link>
          </div>
        </div>

        <div className="relative  md:w-3/5 flex flex-col justify-between gap-2 ">
          {/* <Link href={`/formation/${item.slug}`}> */}
          {item.formations && (
            <List
              className="overflow-auto px-1 py-3"
              style={{
                scrollbarWidth: "thin",
                scrollbarColor: "#921243 transparent",
                msOverflowStyle: "none",
              }}
            >
              {item.formations.slice(0, 5).map((cour, index) => (
                <Link
                  key={index}
                  href={
                    "/formation/" +
                    item.slug +
                    "/inscription?thematique=" +
                    cour.name +
                    "&cat=" +
                    cour.categories[0].name
                  }
                >
                  <ListItem className="p-2 inline-flex items-center ">
                    <ListItemPrefix>
                      <AcademicCapIcon
                        height={20}
                        className="text-vert_fonce"
                        width={20}
                      />
                      {/* <Avatar
                        variant="rounded"
                        alt="candice"
                        src="/assets/img-bsl/test2.jpg"
                      /> */}
                    </ListItemPrefix>
                    <Typography
                      variant="h6"
                      className="line-clamp-1"
                      color="blue-gray"
                    >
                      {cour.name}
                    </Typography>
                    <Typography
                      variant="small"
                      color="gray"
                      className="font-normal line-clamp-1 inline-flex"
                    >
                      {/* <ClockIcon className="h-5 text-jaune_vif" />
                        {cour.duration}
                        &nbsp;
                        <CalendarDaysIcon className="h-5  text-jaune_vif" />{" "}
                        Débute le 10/03/2024
                        {convertDateFormat(item.date_debut)} */}
                    </Typography>
                  </ListItem>
                </Link>
              ))}
            </List>
          )}
          <div className="bg-gray-900 text-white px-4 relative bottom-0 z-10 text-base py-[9px] rounded-br-md">
            <Link href={"/formation/" + item.slug}>
              <Button
                variant="outlined"
                className="text-xs  hover:bg-white hover:text-vert_fonce"
                size="sm"
                color="white"
              >
                En savoir plus
              </Button>
            </Link>
          </div>
        </div>
      </div>
      {/* <DialogPaiement cours_id={item.id} cours_prix={item.prix_formation} state_modal={open} cours_name={item.name}/> */}
    </div>
  );
};