import { useDraggable } from '@dnd-kit/core';
import { KanbanColumn, KanbanColumnProps } from './KanbanColumn';

export function SortableKanbanColumn(props: KanbanColumnProps) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: `COLUMN_${props.list.id}`,
    data: {
      type: 'column',
      columnId: props.list.id,
    },
  });

  const style = transform
    ? {
        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
        opacity: isDragging ? 0.5 : 1,
      }
    : undefined;

  return (
    <div ref={setNodeRef} style={style}>
      <KanbanColumn {...props} dragHandleProps={{ attributes, listeners }} />
    </div>
  );
}