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 = ({ color_a, color_b }: { color_a: string; color_b: string }) => (
    <details
        class="toggle"
        style="position: relative; margin: 0; cursor: pointer;"
    >
        <summary
            style={`list-style: none; margin: 0; display: block; width: 100%; height: 100%; background-color: ${color_a};`}
        ></summary>
        <div
            style={`margin: 0; display: block; width: 100%; height: 100%; position: absolute; top: 0; pointer-events: none; background-color: ${color_b};`}
        ></div>
    </details>
);

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

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