import { h } from "@stencil/core";
import { Icon } from "./icon";
export const ZIconButton = (props) => {
    const { id, variant = 'primary', disabled = false, iconName, icon, noPadding, noPaddingY, addClassIcon, ref, isLoading, title, } = props;
    const base = `z-icon-button px-${noPadding ? 0 : '2 w-9'} py-${noPaddingY ? 0 : 2}`;
    const primary = 'z-icon-button-primary';
    const outlined = 'z-icon-button-outlined';
    const text = 'z-icon-button-text';
    const none = "hover:brightness-110 text-surface";
    const disabledStyle = 'z-icon-button-disabled';
    const classList = [base, variant === 'primary' ? primary : variant === 'outlined' ? outlined : variant === 'text' ? text : none, disabled ? disabledStyle : ''].join(' ');
    return (h("button", { id: id, title: title, ref: ref, class: classList, disabled: disabled, onClick: e => {
            if (!disabled && !isLoading && props.onClick) {
                props.onClick(e);
            }
        } }, icon || h(Icon, { name: isLoading ? 'LoaderCircle' : iconName, addClass: isLoading ? `animate-spin ${addClassIcon || 'size-5'}` : addClassIcon })));
};
