import React, {RefObject, useRef} from "react"

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

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

export interface CourtBallProps {
    onDrop: (pos: DOMRect) => void
}

export function CourtBall({ onDrop }: CourtBallProps) {
    const ref = useRef<HTMLElement>()
    return (
        <Draggable onStop={() => onDrop(ref.current!.getBoundingClientRect())} nodeRef={ref}>
            <BallPiece pieceRef={ref}/>
        </Draggable>
    )
}

export function BallPiece({pieceRef}: {pieceRef: RefObject<HTMLElement>}) {
    return (
        <div ref={pieceRef} className={`ball-div`} >
            <Ball className={"ball"} />
        </div>
    )
}