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

import { <%- name %>ContainerProps } from "../typings/<%- name %>Props";
import { BadgeSample } from "./components/BadgeSample";
import "./ui/<%- name %>.css";

export function <%- name %>(props: <%- name %>ContainerProps): ReactElement {
    const { <%- packageName %>Type, <%- packageName %>Value, valueAttribute, onClickAction, style, bootstrapStyle } = props;
    const onClickHandler = useCallback(() => {
        if (onClickAction && onClickAction.canExecute) {
            onClickAction.execute();
        }
    }, [onClickAction]);

    return (
        <BadgeSample
            type={<%- packageName %>Type}
            bootstrapStyle={bootstrapStyle}
            className={props.class}
            clickable={!!onClickAction}
            defaultValue={<%- packageName %>Value ? <%- packageName %>Value : ""}
            onClickAction={onClickHandler}
            style={style}
            value={valueAttribute ? valueAttribute.displayValue : ""} />
    );
}