import { Attributes, ComponentChildren, VNode, toChildArray } from "preact";
import { render } from "preact-render-to-string";
import { writeText } from "copy-paste";

export function Main({
    children,
    ...attributes
}: {
    children: ComponentChildren;
    attributes?: Attributes;
}) {
    return (
        <div {...attributes} id="main">
            {...toChildArray(children)}
        </div>
    );
}

export const HCenter = ({
    children,
    ...attrs
}: {
    children: ComponentChildren;
    attrs?: Attributes;
}) => (
    <div
        {...attrs}
        class="hcenter"
        style="display: flex; justify-content: center;"
    >
        {...toChildArray(children)}
    </div>
);

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

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

export const render_and_copy = (elem: VNode) => {
    const rendered = render(elem);
    writeText(rendered);
    console.log(rendered);
};

export const mk_class_wrapper =
    (klass: string) =>
    ({ children }: { children: ComponentChildren }) =>
        <div class="klass">{...toChildArray(children)}</div>;