import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { CSSProperties } from 'react';

export const useDndItem = (id?: string) => {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
    isDragging,
  } = useSortable({ id: id as string });

  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };

  const draggingStyle: CSSProperties = {
    position: isDragging ? 'relative' : 'inherit',
    zIndex: isDragging ? 1 : 0,
  };

  return {
    attributes,
    listeners,
    setNodeRef,
    style,
    draggingStyle,
  };
};