import "../style/theme/default.css"
import "../style/new_tactic_panel.css"

import plainCourt from "../assets/court/full_court.svg"
import halfCourt from "../assets/court/half_court.svg"
import { BASE } from "../Constants"

export default function NewTacticPanel() {
    return (
        <div id={"panel-root"}>
            <div id={"panel-top"}>
                <p>Select a basket court</p>
            </div>
            <div id={"panel-choices"}>
                <div id={"panel-buttons"}>
                    <CourtKindButton
                        name="Plain"
                        details="Select a plain basketball court"
                        image={plainCourt}
                        redirect="/tactic/new/plain"
                    />
                    <CourtKindButton
                        name="Half"
                        details="Select half a basketball court"
                        image={halfCourt}
                        redirect="/tactic/new/half"
                    />
                </div>
            </div>
        </div>
    )
}

function CourtKindButton({
    name,
    image,
    details,
    redirect,
}: {
    name: string
    image: string
    details: string
    redirect: string
}) {
    return (
        <div
            className="court-kind-button"
            onClick={() => (location.href = BASE + redirect)}>
            <div className="court-kind-button-details">{details}</div>
            <div className="court-kind-button-top">
                <div className="court-kind-button-image-div">
                    <img
                        src={image}
                        alt={name}
                        className="court-kind-button-image"
                    />
                </div>
            </div>
            <div className="court-kind-button-bottom">
                <p className="court-kind-button-name">{name}</p>
            </div>
        </div>
    )
}