import { h } from "@stencil/core";
export const ZButton = ({ id, variant = 'primary', textVariant = 'primary', disabled = false, onClick, fullWidth, maxWidth, label, startIcon, endIcon, size = 'medium', ref, title, padding, }) => {
    let styleSize = 'z-button-medium';
    if (size === 'x-small') {
        styleSize = 'z-button-x-small';
    }
    if (size === 'small') {
        styleSize = 'z-button-small';
    }
    if (size === 'large') {
        styleSize = 'z-button-large';
    }
    const base = `z-button ${padding || ''} ${styleSize} ${fullWidth ? 'w-full' : maxWidth ? maxWidth : ''}`;
    const primary = 'z-button-primary';
    const outlined = 'z-button-outlined';
    const text = `${textVariant === 'primary' ? 'text-primary' : 'text-surface'} hover:brightness-110`;
    const textUnderline = `${textVariant === 'primary' ? 'text-primary' : 'text-surface'} hover:brightness-110 underline`;
    const disabledStyle = 'z-button-disabled';
    let variantClass;
    if (variant === 'primary') {
        variantClass = primary;
    }
    else if (variant === 'outlined') {
        variantClass = outlined;
    }
    else if (variant === 'text-underline') {
        variantClass = textUnderline;
    }
    else {
        variantClass = text;
    }
    const disabledClass = disabled ? disabledStyle : '';
    const classList = [base, variantClass, disabledClass].filter(Boolean).join(' ');
    return (h("button", { id: id, title: title, ref: ref, class: classList, disabled: disabled, onClick: e => {
            if (disabled)
                return;
            if (onClick)
                onClick(e);
        } }, startIcon, label && h("span", { class: "z-button-text", id: id }, label), endIcon));
};
