import { ReactElement, createElement, useCallback } from "react";

import { Badge } from "./components/Badge";
import { BadgeStyle } from "./ui/styles";
import { <%- name %>Props } from "../typings/<%- name %>Props";

export function <%- name %>({ value, style, onClick }: <%- name %>Props<BadgeStyle>): ReactElement {
    const onClickHandler = useCallback(() => {
        if (onClick && onClick.canExecute && !onClick.isExecuting) {
            onClick.execute();
        }
    }, [onClick]);

    return (
        <Badge
            style={style}
            onClick={onClickHandler}
            value={value?.displayValue || "Default"}
        />
    );
}