import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Card as CardType } from '../../types/kanban';

interface KanbanCardProps {
  card: CardType;
  onClick: () => void;
}

export function KanbanCard({ card, onClick }: KanbanCardProps) {
  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
    id: card.id.toString(),
  });

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

  return (
    <div
      ref={setNodeRef}
      style={style}
      {...attributes}
      {...listeners}
      onClick={onClick}
      className="bg-gray-700 rounded-lg p-4 mb-3 cursor-pointer hover:bg-gray-600 transition-colors border border-gray-600 shadow-sm"
    >
      <h3 className="text-white font-medium mb-2">{card.name}</h3>

      {card.description && (
        <p className="text-gray-400 text-sm mb-2 line-clamp-2">{card.description}</p>
      )}

      <div className="flex items-center justify-between text-xs text-gray-500">
        <span>#{card.id_short}</span>
        {card.due && (
          <span className={card.due_complete ? 'text-green-400' : 'text-yellow-400'}>
            Due: {new Date(card.due).toLocaleDateString()}
          </span>
        )}
      </div>
    </div>
  );
}