import React from 'react';
import { useClasses } from '@/context/ClassesContext';
import DraggableSpeciality from '@/components/Structure/Planning/DraggableSpeciality';

const SpecialitiesList = ({ teachers }) => {
  const { groupSpecialitiesBySubject } = useClasses();

  return (
    <div className="flex justify-center items-center w-full">
      <div className="flex flex-wrap gap-2 mt-4 justify-center">
        {groupSpecialitiesBySubject(teachers).map((speciality) => (
          <DraggableSpeciality key={speciality.id} speciality={speciality} />
        ))}
      </div>
    </div>
  );
};

export default SpecialitiesList;