// src/components/SortableItem.tsx
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

export function SortableItem(props: { id: string, children: React.ReactNode }) {
  const {
    attributes,
    listeners,
    setNodeRef,
    transform,
    transition,
  } = useSortable({ id: props.id });
  
  // La única propiedad de estilo que necesitamos en línea es la que calcula dnd-kit
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
  };
  
  // Añadimos la clase CSS que creamos
  return (
    <li ref={setNodeRef} style={style} {...attributes} {...listeners} className="sortable-item">
      {props.children}
    </li>
  );
}