import {BallPiece} from "../editor/BallPiece"
import Draggable from "react-draggable"
import {useRef} from "react"
import {NULL_POS} from "../../geo/Pos";

export interface BallActionProps {
    onDrop: (el: DOMRect) => void
}

export default function BallAction({onDrop}: BallActionProps) {
    const ref = useRef<HTMLDivElement>(null)
    return (
        <Draggable
            nodeRef={ref}
            onStop={() => onDrop(ref.current!.getBoundingClientRect())}
            position={NULL_POS}>
            <div ref={ref}>
                <BallPiece/>
            </div>
        </Draggable>
    )
}