import React from "react";
import { __ } from "@wordpress/i18n";
import { Link } from "react-router-dom";
import SpinnerButton from "@libs/confirm-dialog/SpinnerButton";
import SettingsLastSavedAt from "./SettingsLastSavedAt";

const SettingsActionFooter = ({
  saving,
  onSave,
  onDiscard,
  disabled = false,
  saveLabel = __("Save Settings", "arraysubs"),
}) => (
  <div className="arraysubs-settings-actions arraysubs-bottom-fixed-actions">
    <div>
      <SpinnerButton
        type={onSave ? "button" : "submit"}
        className="button button-primary"
        onClick={onSave}
        loading={saving}
        disabled={disabled}
        loadingText={__("Saving…", "arraysubs")}
      >
        {saveLabel}
      </SpinnerButton>
      <button
        type="button"
        className="button"
        onClick={onDiscard}
        disabled={saving || disabled}
      >
        {__("Discard Changes", "arraysubs")}
      </button>
      <Link to="/easy-setup" className="button-link">
        {__("Quick Setup & Import/Export", "arraysubs")}
      </Link>
      <SettingsLastSavedAt />
    </div>
  </div>
);

export default SettingsActionFooter;