import { JSX } from "preact/jsx-runtime";
import { EggbugImg, Main, render_and_copy } from "./common.tsx";

const GolfBall = () => (
    <div
        style={{
            resize: "both",
            overflow: "hidden",
            position: "relative",
            // TODO: V REMOVE ME V
            outline: "1px solid red",
            width: "10rem",
            height: "10rem",
            transition: "all 5s",
            gridArea: "1 / 1",
        }}
    >
        <EggbugImg
            type="golfball"
            style={{
                margin: 0,
                position: "absolute",
                right: 0,
                bottom: 0,
                width: "5rem",
                height: "5rem",
                pointerEvents: "none",
            }}
        />
    </div>
);

render_and_copy(
    <Main style={{ display: "grid" }}>
        <GolfBall />
    </Main>
);

// OOOO: score with like a dial thing and an arrow pointing to it
// TWO DIALS WILL LOOK EVEN COOLER
// lower is better, just have to add the dials
// might be possible to have multiple holes with a details element that comes into frame hm

// hm this kinda sucks. you just drag it to the hole, there's no challenge
// i could have the ball be in a different place but then that would feel bad
// i think i'll go for the toy angle.
// keep the dials, have a "course"