"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.MobileHeader = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _templateObject, _templateObject2, _templateObject3;

var MobileHeader = function MobileHeader(_ref) {
  var displayValue = _ref.displayValue,
      displayCount = _ref.displayCount,
      title = _ref.title,
      itemsText = _ref.itemsText;
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Label, null, title), /*#__PURE__*/_react["default"].createElement(ContentContainer, {
    isCount: true
  }, displayCount, " ", itemsText, " |", ' '), ' ', /*#__PURE__*/_react["default"].createElement(ContentContainer, {
    isSum: true
  }, displayValue));
};

exports.MobileHeader = MobileHeader;

var Container = _styledComponents["default"].div.attrs({
  className: 'mb-4 d-lg-none'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n"])));

var Label = _styledComponents["default"].h3(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ContentContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: inline-block;\n\n  ", "\n\n  ", "\n"])), function (props) {
  return props.isCount && "\n    color: " + props.theme.palette.hint + ";\n  ";
}, function (props) {
  return props.isSum && "\n  color: " + props.theme.palette.primary + "\n  font-weight: 400;\n  ";
});
//# sourceMappingURL=index.js.map