import { Cycle, render_and_copy } from "./common.tsx";

const emojis = [
    "🏡",
    "🌳",
    "🌲",
    "🎄",
    "🐦",
    "🦊",
    "🦌",
    "🐶",
    "🐕",
    "🐩",
    "🦈",
];

const Emoji = ({ children }: { children: string }) => <div>{children}</div>;

const Cell = () => (
    <Cycle width_px={50} height_px={50} style={{}}>
        <Emoji> </Emoji>
        {...emojis.map(e => <Emoji>{e}</Emoji>)}
    </Cycle>
);

render_and_copy(
    <div
        style={{
            width: "calc(50px * 7)",
            aspectRatio: "1",
            margin: "0 auto",
            display: "grid",
            gridTemplateColumns: "repeat(7, 1fr)",
            fontSize: "33px",
            outline: "1px solid black",
            backgroundColor: "#296639",
        }}
    >
        {...Array.from({ length: 49 }, () => <Cell />)}
    </div>
);