// ShipmentItem.tsx
import { useDraggable } from "@dnd-kit/core";

interface ShipmentItemProps {
	shipment: any;
	index?: number;
	perm?: boolean;
}

export function ShipmentItem({
	shipment,
	index = 0,
	perm = true,
}: ShipmentItemProps) {
	const { setNodeRef, listeners, attributes, transform } = useDraggable({
		id: shipment.orderNumber,
		data: shipment,
	});

	const offsetX = index * 10;

	const style: React.CSSProperties = {
		transform: transform
			? `translate(${transform.x}px, ${transform.y}px)`
			: `translateX(${offsetX}px)`,
		transition: transform ? "none" : "transform 0.2s ease",
		zIndex: 10 + index,
		position: "absolute",
		top: 0,
		left: 0,
		cursor: "grab",
	};
	return (
		<div
			ref={setNodeRef}
			{...listeners}
			{...attributes}
			style={style}
			className="w-[160px] p-2 text-xs rounded shadow select-none "
		>
			{shipment.orderNumber}
		</div>
	);
}