import React from 'react';
import PropTypes from 'prop-types';
import extractor from '../../util/image';
import Provider from '../../atom/provider';
import style from './style.css';
function ThemeImage({
  image
}, {
  skin
}) {
  const extract = extractor(skin);
  const defaultStyle = extract(image);
  const extractWithDefault = extractor(skin, image);
  const mobileStyle = extractWithDefault(`${image}-mobile`);
  const tabletStyle = extractWithDefault(`${image}-tablet`);
  const desktopStyle = extractWithDefault(`${image}-desktop`);
  return /*#__PURE__*/React.createElement("div", {
    className: style.wrapper
  }, /*#__PURE__*/React.createElement("div", {
    className: style.defaultStyle
  }, /*#__PURE__*/React.createElement("div", {
    className: style.background,
    style: defaultStyle
  })), /*#__PURE__*/React.createElement("div", {
    className: style.desktopContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.background,
    style: desktopStyle
  })), /*#__PURE__*/React.createElement("div", {
    className: style.tabletContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.background,
    style: tabletStyle
  })), /*#__PURE__*/React.createElement("div", {
    className: style.mobileContainer
  }, /*#__PURE__*/React.createElement("div", {
    className: style.background,
    style: mobileStyle
  })));
}
ThemeImage.contextTypes = {
  skin: Provider.childContextTypes.skin
};
ThemeImage.propTypes = process.env.NODE_ENV !== "production" ? {
  image: PropTypes.string.isRequired
} : {};
export default ThemeImage;
//# sourceMappingURL=index.js.map