import React from 'react';
import Table from '@/components/Table';

const TeachersSelectionConfiguration = ({
  formData,
  teachers,
  handleTeacherSelection,
  selectedTeachers,
}) => {
  return (
    <div className="mt-4" style={{ maxHeight: '300px', overflowY: 'auto' }}>
      <label className="mt-6 block text-2xl font-medium text-gray-700 mb-2">
        Enseignants
      </label>
      <label className={`block text-sm font-medium mb-4`}>
        Sélection :{' '}
        <span
          className={`${formData.teachers.length !== 0 ? 'text-emerald-400' : 'text-red-300'}`}
        >
          {formData.teachers.length}
        </span>
      </label>
      <Table
        columns={[
          {
            name: 'Nom',
            transform: (row) => row.last_name,
          },
          {
            name: 'Prénom',
            transform: (row) => row.first_name,
          },
          // {
          //   name: 'Spécialités',
          //   transform: (row) => (
          //     <div className="flex flex-wrap items-center">
          //       {row.specialites.map(specialite => (
          //         <span key={specialite.id} className="flex items-center mr-2 mb-1">
          //           <div
          //             className="w-4 h-4 rounded-full mr-2"
          //             style={{ backgroundColor: specialite.codeCouleur }}
          //             title={specialite.nom}
          //           ></div>
          //           <span>{specialite.nom}</span>
          //         </span>
          //       ))}
          //     </div>
          //   ),
          // },
        ]}
        data={teachers}
        onRowClick={handleTeacherSelection}
        selectedRows={selectedTeachers}
        isSelectable={true}
      />
    </div>
  );
};

export default TeachersSelectionConfiguration;