import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

export const Banniere = ({ category }) => {
  //const cour = DataFormation.thumbnail[id];
  return (
    <div className="flex flex-col bg-black bg-cover px-10 lg:px-32">
      <div className="lg:w-1/2 py-16 flex flex-col gap-2">
        <h6 className="font-bold text-jaune_vif">{category?.name}</h6>
        <h1 className="text-3xl font-bold text-white">{category?.name}</h1>
        <div className="flex flex-row items-center text-sm text-white font-medium">
          <span>Par BSL Academy | &nbsp;</span>
          <FontAwesomeIcon
            className="text-jaune_vif h-4 pr-2"
            icon="info-circle"
          />
          {/* <span className="text-jaune_vif">Mise à jour le {01/08/2023}</span> */}
        </div>
        <div className="flex flex-row text-sm text-white">
          <div className="flex flex-row gap-2 font-medium text-vert_fonce bg-white py-1 px-3 items-center rounded-sm">
            <FontAwesomeIcon icon="user" className="h-4" />
            <span>{0} élèves inscrits</span>
          </div>
          <div className="flex flex-row gap-2 font-medium text-white  py-1 px-3 items-center rounded-sm">
            <FontAwesomeIcon icon="language" className="h-4" />
            <span>Français</span>
          </div>
        </div>
      </div>
    </div>
  );
};