'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var ReactRpgPhoto = function ReactRpgPhoto(_ref) {
  var url = _ref.url;
  var padding = _ref.padding;
  var _ref$clickHandler = _ref.clickHandler;
  var clickHandler = _ref$clickHandler === undefined ? null : _ref$clickHandler;

  var pointer = clickHandler ? 'pointer' : 'auto';

  var styles = {
    imageGridItem: {
      display: 'inline-block',
      boxSizing: 'border-box',
      float: 'left',
      padding: padding
    },
    imageWrapper: {
      position: 'relative',
      width: '100%',
      paddingBottom: '100%',
      backgroundImage: 'url(' + url + ')',
      backgroundSize: 'cover',
      backgroundPosition: 'center center',
      backgroundRepeat: 'no-repeat',
      cursor: pointer
    }
  };

  return _react2['default'].createElement(
    'div',
    { className: 'imageGridItem', style: styles.imageGridItem },
    _react2['default'].createElement(
      'a',
      { onClick: clickHandler ? clickHandler.bind(undefined, url) : null },
      _react2['default'].createElement('div', { className: 'imageWrapper', style: styles.imageWrapper })
    )
  );
};

ReactRpgPhoto.propTypes = {
  url: _react2['default'].PropTypes.string.isRequired,
  padding: _react2['default'].PropTypes.number,
  clickHandler: _react2['default'].PropTypes.func
};

exports['default'] = ReactRpgPhoto;
module.exports = exports['default'];