import { useDrag } from 'react-dnd';
import React from 'react';

const ItemTypes = {
  TEACHER: 'teacher',
};

const TeacherItem = ({ teacher, isDraggable = true }) => {
  const [{ isDragging }, drag] = useDrag(() => ({
    type: ItemTypes.TEACHER,
    item: { id: teacher.id, name: `${teacher.last_name} ${teacher.first_name}` },
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging(),
    }),
    canDrag: () => isDraggable,
  }), [isDraggable]);

  return (
    <div
      ref={isDraggable ? drag : null}
      className={`inline-block px-3 py-1 rounded-lg font-bold text-white text-center transition-transform duration-200 ease-in-out ${
        isDragging ? 'opacity-30' : 'opacity-100'
      } ${isDraggable ? 'cursor-grabbing hover:shadow-lg hover:scale-105' : ''}`}
      style={{
        backgroundColor: isDragging ? '#d1d5db' : isDraggable ? '#10b981' : '#a7f3d0', // Change background color based on dragging state and draggable state
        border: isDraggable ? '1px solid #10b981' : '1px solid #a7f3d0', // Add a border
        boxShadow: isDraggable ? '0 2px 4px rgba(0, 0, 0, 0.1)' : 'none' // Add a shadow if draggable
      }}
    >
      {teacher.last_name} {teacher.first_name}
    </div>
  );
};

export default TeacherItem;