import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import './style.css';

var ArrowButton = function ArrowButton(props) {
  var _classNames;

  var buttonClasses = classNames((_classNames = {
    'ma__arrow-button': true
  }, _classNames['ma__arrow-button--' + props.direction] = props.direction, _classNames['ma__arrow-button--left'] = !props.direction, _classNames));
  var Element = props.href ? 'a' : 'button';
  var onClickCallback = function onClickCallback(e) {
    if (typeof props.onClick === 'function') {
      e.preventDefault();
      props.onClick(e);
    }
  };

  return React.createElement(Element, {
    className: buttonClasses,
    onClick: function onClick(e) {
      return onClickCallback(e);
    },
    href: props.href,
    title: props.info,
    'aria-label': props.info
  });
};

ArrowButton.propTypes = process.env.NODE_ENV !== "production" ? {
  /** Custom click handler function. */
  onClick: PropTypes.func,
  /** When populated with a url, this component renders a <a> vs a <button> */
  href: PropTypes.string,
  /** The text which renders in the standard browser tooltip on hover */
  info: PropTypes.string,
  /** Direction of the arrow. */
  direction: PropTypes.oneOf(['left', 'right'])
} : {};

ArrowButton.defaultProps = {
  onClick: '',
  href: '',
  info: '',
  direction: 'left'
};

export default ArrowButton;