const RepresentationActionButtons = ({
    t,
    locale,
    isSaving,
    isContinueDisabled,
    onSaveExit
}) => {
    return (
        <div className="govuk-grid-row">
            <div className="govuk-button-group">
                <button
                    type="submit"
                    className="govuk-button"
                    data-module="govuk-button"
                    disabled={isContinueDisabled}
                >
                    {t("common:continue-button")}
                </button>

                {isSaving ? (
                    <span className=" progress-save-active">
                        {locale == "cy" ? "Nôl data" : "Saving data"}
                        <img
                            className="data-loading-icon"
                            src="/assets/images/loading.gif"
                            alt={locale == "cy" ? "Nôl data" : "Saving data"}
                        />
                    </span>
                ) : (
                    <button
                        className="govuk-button progress-save "
                        onClick={onSaveExit}
                    >
                        {t("common:save-exit-button")}
                    </button>
                )}
            </div>
        </div>
    );
};

export default RepresentationActionButtons;