import React, {useEffect, useRef} from "react";
import "../../style/player.css";
import Draggable, {DraggableBounds} from "react-draggable";

export default function Player({id, x, y, bounds}: {
    id: number,
    x: number,
    y: number,
    bounds: DraggableBounds
}) {

    const ref = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const playerRect = ref.current!.getBoundingClientRect();
        bounds.bottom! -= playerRect.height / 2;
        bounds.right! -= playerRect.width / 2;
    }, [ref])

    return (
        <Draggable
            nodeRef={ref}
            bounds={bounds}
            defaultPosition={{x: x, y: y}}>
            <div ref={ref}
                 className="player"
                 style={{
                     position: "absolute",
                 }}>
                <p>{id}</p>
            </div>
        </Draggable>

    )
}