import React, {RefObject} from "react";

import "../../style/ball.css";

import Ball from "../../assets/icon/ball.svg?react";
import Draggable from "react-draggable";

export interface BallPieceProps {
    onDrop: () => void
    pieceRef: RefObject<HTMLDivElement>
}


export function BallPiece({onDrop, pieceRef}: BallPieceProps) {
    return (
        <Draggable
            onStop={onDrop}
            nodeRef={pieceRef}
            position={{x: 0, y: 0}}
        >
            <div className={`ball-div`} ref={pieceRef}>
                <Ball className={'ball'}/>
            </div>
        </Draggable>
    )
}