import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { X, GripVertical } from 'lucide-react';
import { SentenceToken } from '../../stores/sentenceStore';
import { wordTypeColors } from '../../lib/wordTypeColors';

interface SortableTokenProps {
  token: SentenceToken;
  onRemove: (tokenId: string) => void;
}

export function SortableToken({ token, onRemove }: SortableTokenProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: token.id,
  });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    opacity: isDragging ? 0.5 : 1,
  };

  const bgColor = wordTypeColors[token.term.wordType] || 'bg-gray-600';

  return (
    <div
      ref={setNodeRef}
      style={style}
      className={`${bgColor} text-white rounded-lg px-4 py-3 flex items-center gap-2 shadow-md hover:shadow-lg transition-shadow cursor-move`}
    >
      <div {...attributes} {...listeners} className="cursor-grab active:cursor-grabbing">
        <GripVertical className="h-5 w-5" />
      </div>
      <span className="font-semibold text-lg">{token.displayText}</span>
      <button
        onClick={() => onRemove(token.id)}
        className="ml-2 hover:bg-white/20 rounded p-1 transition-colors"
        aria-label="Ukloni riječ"
      >
        <X className="h-4 w-4" />
      </button>
    </div>
  );
}

