import React from 'react';
import { Draggable } from '@hello-pangea/dnd';
import TaskCard from '../task/TaskCard';

export default function DraggableTaskCard({ task, index, onClick }) {
  return (
    <Draggable draggableId={String(task.id)} index={index}>
      {(provided, snapshot) => (
        <div
          ref={provided.innerRef}
          {...provided.draggableProps}
          {...provided.dragHandleProps}
          className={`transition-transform ${snapshot.isDragging ? 'rotate-2 scale-105 z-50' : ''}`}
        >
          <TaskCard task={task} onClick={onClick} />
        </div>
      )}
    </Draggable>
  );
}