import { Main, jitter, n_of, render_and_copy } from "./common.tsx";

const Square = ({ row }: { row: number }) => (
    <div
        style={{
            outline: "0.05rem solid black",
            borderRadius: "0.05rem",
            transform: `translateX(${jitter(row * 2)}px) translateY(${jitter(
                row * 2
            )}px) rotate(${jitter(row * 0.05)}rad)`,
        }}
    ></div>
);

render_and_copy(
    <div
        style={{
            backgroundColor: "#E1DED9",
            padding: "18%",
            border: "1.5rem solid #0C0C0C",
        }}
    >
        <Main
            style={{
                display: "grid",
                gridTemplateColumns: "repeat(12, 1fr)",
                width: "100%",
                aspectRatio: "12 / 22",
                gap: "-1px",
            }}
        >
            {n_of(22, undefined).map((_, row) =>
                n_of(12, <Square row={row} />)
            )}
        </Main>
        <div
            style={{
                textAlign: "right",
                marginTop: "1.5rem",
                fontSize: "0.5rem",
            }}
        >
            <a
                href="https://collections.vam.ac.uk/item/O221321/schotter-print-nees-georg/"
                style={{ textDecoration: "none" }}
            >
                COMPUTERGRAFIK MIT SIEMENS-SYSTEM 4004
            </a>
        </div>
    </div>
);