import {ComponentChildren, JSX} from 'preact';
import cn from 'classnames';
import style from "./style.module.scss";

export function Button(props: {
    loading?: boolean;
    onClick?: () => void;
    className?: string;
    secondary?: boolean;
    disabled?: boolean;
    title?: string;
    children: ComponentChildren;
}) {
    const disabled = props.disabled || props.loading;
    const buttonClass = cn(style.btn, {[style.secondary]: props.secondary}, 'button', props.className, {[style.disabled]:disabled});

    let spinner: JSX.Element = undefined;

    if (props.loading) {
        spinner = <span className={style.spinner}/>
    }

    return (
        <button
            type="button"
            onClick={() => {
                if (!disabled) {
                    props.onClick()
                }
            }}
            className={buttonClass}
            disabled={disabled}
            title={props.title}
        >
            {spinner}
            {props.children}
        </button>
    );
}