import { Html, debug_render } from "./html.ts";
import { Component } from "./jsx/jsx-runtime.ts";

const wheel = (...items: Html[]): Html => (
    <div class="wheel">
        {...items.map(i => <div class="wheel-item">{i} people</div>)}
    </div>
);

const Take: Component = ({ subjects, objects, adjectives }, _) => (
    <div class="take">
        {wheel(...subjects)} who eat {wheel(...objects)} are{" "}
        {wheel(...adjectives)}
    </div>
);

// might want to have the final item be seperate
debug_render(
    <Take
        subjects={[
            "poor",
            "fat",
            "dumb",
            "tall",
            "short",
            "poor",
            "fat",
            "dumb",
            "tall",
            "hot",
        ]}
        objects={[
            "apples",
            "bread",
            "pasta",
            "candy",
            "rice",
            "beans",
            "apples",
            "bread",
            "candy",
            "rice",
            "beans",
            "apples",
            "bread",
            "pasta",
            "candy",
            "rice",
            "croissants",
        ]}
        adjectives={[
            "vibes",
            "mean",
            "dumb",
            "cool",
            "hot",
            "stupid",
            "funny",
            "vibes",
            "mean",
            "dumb",
            "cool",
            "hot",
            "stupid",
            "dangerous",
        ]}
    />
);