n3wt-school/Front-End/src/components/Structure/Planning/ClassesInformation.js

import React from 'react';
import TeacherLabel from '@/components/CustomLabels/TeacherLabel';

const ClassesInformation = ({ selectedClass, isPastYear }) => {
  if (!selectedClass) {
    return null;
  }

  return (
    <div className={`w-full p-6 shadow-lg rounded-full border relative ${isPastYear ? 'bg-gray-200 border-gray-600' : 'bg-emerald-200 border-emerald-500'}`}>
      <div className={`border-b pb-4 ${isPastYear ? 'border-gray-600' : 'border-emerald-500'}`}>
        <p className="text-gray-700 text-center"><strong>{selectedClass.age_range} ans</strong></p>
      </div>
      <div className={`border-b pb-4 ${isPastYear ? 'border-gray-600' : 'border-emerald-500'}`}>
        <div className="flex flex-wrap justify-center space-x-4">
          {selectedClass.teachers.map((teacher) => (
            <div key={teacher.id} className="relative group mt-4">
              <TeacherLabel nom={teacher.nom} prenom={teacher.prenom} />
              <div className="absolute left-1/2 transform -translate-x-1/2 bottom-full mb-2 w-max px-4 py-2 text-white bg-gray-800 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                <p className="text-sm">{teacher.nom} {teacher.prenom}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default ClassesInformation;