"use strict";

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

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

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

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

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

var _lib = require("@sentecacommerce-theme/lib");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;

var Message = function Message(_ref) {
  var header = _ref.header,
      content = _ref.content,
      handleRead = _ref.handleRead;

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      buttons = _useGlobalLabels.buttons;

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Inner, null, /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(Text, {
    isHeader: true
  }, header), /*#__PURE__*/_react["default"].createElement(Text, null, content)), /*#__PURE__*/_react["default"].createElement(ActionsContainer, null, /*#__PURE__*/_react["default"].createElement(ActionsWrapper, {
    onClick: handleRead
  }, buttons["delete"])))));
};

exports.Message = Message;

var Container = _styledComponents["default"].div.attrs({
  className: 'pt-3 pb-3'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  font-size: 13px;\n  border-bottom: 1px solid #f0f0f0;\n"])));

var Inner = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  display: flex;\n"])));

var Wrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  flex: 1;\n"])));

var ContentContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  flex: 1;\n\n  @media screen and (max-width: 991px) {\n    flex: 1 1 100%;\n  }\n"])));

var ActionsContainer = _styledComponents["default"].div.attrs({
  className: 'pl-2'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (max-width: 991px) {\n    padding-left: 0 !important;\n  }\n"])));

var ActionsWrapper = _styledComponents["default"].p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  cursor: pointer;\n  font-size: 12px;\n  border-bottom: 1px solid ", ";\n\n  &:hover {\n    opacity: 0.6;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
});

var Text = _styledComponents["default"].p.attrs({
  className: 'mb-3'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: 1.75;\n  font-size: 14px;\n  white-space: normal;\n  overflow: hidden;\n  color: #888;\n  display: block;\n  text-decoration: none;\n  ", "\n"])), function (props) {
  return props.isHeader && "\n  font-size: 18px;\n  font-weight: 500;\n  color: " + props.theme.palette.primary + ";\n  ";
});
//# sourceMappingURL=index.js.map