import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'

export default function ActionableMessage ({
  message = '',
  primaryAction = null,
  secondaryAction = null,
  className = '',
}) {
  return (
    <div className={classnames('actionable-message', className)}>
      <div className="actionable-message__message">
        {message}
      </div>
      {(primaryAction || secondaryAction) && (
        <div className="actionable-message__actions">
          {primaryAction && (
            <div
              className={classnames('actionable-message__action', 'actionable-message__action--primary')}
              onClick={primaryAction.onClick}
            >
              {primaryAction.label}
            </div>
          )}
          {secondaryAction && (
            <div
              className={classnames('actionable-message__action', 'actionable-message__action--secondary')}
              onClick={secondaryAction.onClick}
            >
              {secondaryAction.label}
            </div>
          )}
        </div>
      )}
    </div>
  )
}

ActionableMessage.propTypes = {
  message: PropTypes.node.isRequired,
  primaryAction: PropTypes.shape({
    label: PropTypes.string,
    onClick: PropTypes.func,
  }),
  secondaryAction: PropTypes.shape({
    label: PropTypes.string,
    onClick: PropTypes.func,
  }),
  className: PropTypes.string,
}