import React, {ReactNode} from "react";
import "./formbuttonalt.scss";


type FormButtonAltProps = {
    onButtonClick?: () => void;
    buttonType: "submit" | "button" | "reset" ;
    status?: "retry" //adds different style
    isDisabled?: boolean; //adds disabled style
    children: ReactNode;
    isLoading?: boolean //Disables click events and add wait-cursor on hover
};

const FormButtonAlt = (props: FormButtonAltProps) => {
    return (
        <button
            disabled={props.isDisabled}
            type={props.buttonType}
            onClick={() => !props.isLoading && props.onButtonClick && props.onButtonClick()}
            className={`form-button-alt ${props.isLoading && 'loading'}`}
        >
            {props.children}
        </button>
    );
};

export default FormButtonAlt;