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

export const Main: Component = (attributes, children) => (
    <div {...attributes} id="main">
        {...children}
    </div>
);

export const HCenter: Component = (attributes, children) => (
    <div
        {...attributes}
        class="hcenter"
        style="display: flex; justify-content: center;"
    >
        {...children}
    </div>
);

export const styles = (s: Record<string, string | number>): string =>
    Object.entries(s)
        .map(([rule, val]) => `${rule}: ${val};`)
        .join("");

export const eggbug_emotions: Record<string, Html> = {
    smiling: (
        <img
            class="eggbug"
            src="https://staging.cohostcdn.org/attachment/f33b4285-0455-4128-96b8-117054af40c3/eggbugSquare.png"
            alt="eggbug, smiling"
        />
    ),
};

export const EggbugImg: Component = ({ type }) => eggbug_emotions[type];