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

// don't want to do randomly on since it's not unique anyway
const Pixel = () => (
    <details
        class="toggle"
        style="position: relative; margin: 0; cursor: pointer;"
    >
        <summary
            style="list-style: none; display: block; width: 100%; height: 100%;"
            class="off"
        ></summary>
        <div
            style="display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none;"
            class="on"
        ></div>
    </details>
);

const Pixels = ({
    n,
    color_a,
    color_b,
}: {
    n: number;
    color_a: string;
    color_b: string;
}) => <>{...new Array(n).fill(null).map(Pixel)}</>;

render_and_copy(
    <Main>
        <Pixels
            n={20 ** 2}
            color_a="rgb(var(--color-background))"
            color_b="rgb(var(--color-foreground))"
        />
    </Main>
);