import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import styled from 'styled-components';
export var MobileHeader = (_ref) => {
  var {
    displayValue,
    displayCount,
    title,
    itemsText
  } = _ref;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Label, null, title), /*#__PURE__*/React.createElement(ContentContainer, {
    isCount: true
  }, displayCount, " ", itemsText, " |", ' '), ' ', /*#__PURE__*/React.createElement(ContentContainer, {
    isSum: true
  }, displayValue));
};
var Container = styled.div.attrs({
  className: 'mb-4 d-lg-none'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  text-align: center;\n"])));
var Label = styled.h3(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var ContentContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: inline-block;\n\n  ", "\n\n  ", "\n"])), props => props.isCount && "\n    color: " + props.theme.palette.hint + ";\n  ", props => props.isSum && "\n  color: " + props.theme.palette.primary + "\n  font-weight: 400;\n  ");
//# sourceMappingURL=index.js.map