import React, { CSSProperties, useState } from "react"
import "../style/visualizer.css"
import Court from "../assets/basketball_court.svg"


export default function Visualizer({id, name}: { id: number; name: string }) {
    const [style, setStyle] = useState<CSSProperties>({});

    return (
        <div id="main">
            <div id="topbar">
                <h1>{name}</h1>
            </div>
            <div id="court-container">
                <img
                    id="court"
                    src={Court}
                    style={style}
                    alt="Basketball Court"
                />
            </div>
        </div>
    );
}