import React from 'react';
import { useDrag } from 'react-dnd';
import { UserIcon } from 'lucide-react'; // Assure-toi d'importer l'icône que tu souhaites utiliser

const DraggableSpeciality = ({ speciality }) => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: 'SPECIALITY',
    item: {
      id: speciality.id,
      name: speciality.nom,
      color: speciality.codeCouleur,
      teachers: speciality.teachers,
    },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
  }));

  return (
    <span
      ref={drag}
      key={speciality.id}
      className={`relative flex items-center px-4 py-2 rounded-full font-bold text-white text-center shadow-lg cursor-pointer transition-transform duration-200 ease-in-out transform ${isDragging ? 'opacity-50 scale-95' : 'scale-100 hover:scale-105 hover:shadow-xl'}`}
      style={{
        backgroundColor: speciality.codeCouleur,
        minWidth: '200px',
        maxWidth: '400px',
      }}
      title={speciality.nom}
    >
      {speciality.nom}
      <span className="absolute top-0 right-0 mt-1 mr-1 flex items-center justify-center text-xs bg-black bg-opacity-50 rounded-full px-2 py-1">
        <UserIcon size={16} className="ml-1" />
        {speciality.teachers.length}
      </span>
    </span>
  );
};

export default DraggableSpeciality;