import React from 'react';
import PropTypes from 'prop-types';
import CapRow from '@capillarytech/cap-ui-library/CapRow';
import CapButton from '@capillarytech/cap-ui-library/CapButton';
import CapError from '@capillarytech/cap-ui-library/CapError';

/**
 * FormActions component - Displays save button and error messages
 */
export const FormActions = ({
  onSave,
  isSaveDisabled,
  errorText,
  accountErrorText,
  formatMessage,
  messages,
}) => (
  <>
    <CapRow className="creatives-webpush-actions">
      <CapButton type="primary" onClick={onSave} disabled={isSaveDisabled}>
        {formatMessage(messages.saveTemplate)}
      </CapButton>
    </CapRow>
    {errorText && (
      <CapRow>
        <CapError className="webpush-template-error">{errorText}</CapError>
      </CapRow>
    )}
    {accountErrorText && (
      <CapRow>
        <CapError className="webpush-template-account-error">
          {accountErrorText}
        </CapError>
      </CapRow>
    )}
  </>
);

FormActions.propTypes = {
  onSave: PropTypes.func.isRequired,
  isSaveDisabled: PropTypes.bool.isRequired,
  errorText: PropTypes.string,
  accountErrorText: PropTypes.string,
  formatMessage: PropTypes.func.isRequired,
  messages: PropTypes.object.isRequired,
};

FormActions.defaultProps = {
  errorText: '',
  accountErrorText: '',
};

export default FormActions;

