import React, {ReactNode} from "react";
import "./formbuttonalt.scss";
import plusSign from "../../../assets/images/plus-sign.svg";

type FormButtonAltProps = {
    onButtonClick?: () => void;
    buttonType: "submit" | "button" | "reset" ;
    status?: "retry" //adds different style
    isDisabled?: boolean; //adds disabled style
    children?: ReactNode;
    text: string;
    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.status === 'retry' &&
                <img src={plusSign} alt={props.text}></img>
            }
            <span>{props.text}</span>
        </button>
    );
};

export default FormButtonAlt;