import { render_and_copy } from "./common.tsx";
import { ComponentChildren } from "preact";

const Rail = ({ rotation, r }: { rotation: string; r: string }) => (
    <div
        style={{
            transform: `rotate(${rotation}) translateX(${r})`,
            // transformOrigin: "bottom",
            gridArea: "1/1",
        }}
    >
        🪜
    </div>
);

const Track = ({
    segments,
    r,
    children,
}: {
    segments: number;
    r: string;
    children?: ComponentChildren;
}) => (
    <div
        style={{
            display: "grid",
            width: "100%",
            aspectRatio: "2/1",
            justifyItems: "center",
            alignItems: "center",
            transform: "rotate3d(1,0,0,60deg)",
            margin: "0 auto",
        }}
    >
        {...Array.from({ length: segments }, (_, i) => (
            // deg is actually more efficient lel
            <Rail rotation={`${(360 / segments) * i}deg`} r={r} />
        ))}
        {children}
    </div>
);

render_and_copy(
    <Track segments={60} r={"8rem"}>
        <div id="contrainer">
            <div id="another-contrainer">
                <div id="train">🚂</div>
            </div>
        </div>
    </Track>
);