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>
    )
}