import { BallPiece } from "../editor/BallPiece"
import Draggable from "react-draggable"
import { useRef } from "react"

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

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