import { Drag} from '@visx/drag';

export default function DragCircle({ width=500, height=500, margin = 100}) {

  return (
    <svg width={width} height={height}>
        <Drag
          key={Math.random()*3}
          width={500}
          height={500}
          >{({ dragStart, dragEnd, dragMove, isDragging, x, y, dx, dy }:any) => (
              <circle
                  key={Math.random()}
                  r={12}
                  cx={10}
                  cy={10}
                  fill={'blue'}
                  transform={`translate(${dx}, ${dy})`}
                  stroke={isDragging ? 'white' : 'red'}
                  onMouseMove={dragMove}
                  onMouseUp={dragEnd}
                  onMouseDown={dragStart}
                  onTouchStart={dragStart}
                  onTouchMove={dragMove}
                  onTouchEnd={dragEnd}
                />
            )}
        </Drag>
    </svg>
  );
}