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-4 py-2 rounded-full font-medium text-sm text-center transition-transform duration-200 ease-in-out ${
        isDragging ? 'opacity-50' : 'opacity-100'
      } ${
        isDraggable ? 'cursor-grabbing hover:shadow-md hover:scale-105' : ''
      } ${
        isDragging
          ? 'bg-gradient-to-r from-emerald-100 to-emerald-200 border border-emerald-200'
          : isDraggable
            ? 'bg-gradient-to-r from-emerald-400 to-emerald-300 border border-emerald-400'
            : 'bg-gradient-to-r from-emerald-200 to-emerald-300 border border-emerald-300'
      } text-white`}
    >
      {teacher.last_name} {teacher.first_name}
    </div>
  );
};

export default TeacherItem;
