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

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

import React from 'react';
import styled from 'styled-components';
import { useGlobalLabels } from '@sentecacommerce-theme/lib';

var Message = (_ref) => {
  var {
    header,
    content,
    handleRead
  } = _ref;
  var {
    buttons
  } = useGlobalLabels();
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Inner, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(ContentContainer, null, /*#__PURE__*/React.createElement(Text, {
    isHeader: true
  }, header), /*#__PURE__*/React.createElement(Text, null, content)), /*#__PURE__*/React.createElement(ActionsContainer, null, /*#__PURE__*/React.createElement(ActionsWrapper, {
    onClick: handleRead
  }, buttons.delete)))));
};

var Container = styled.div.attrs({
  className: 'pt-3 pb-3'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  font-size: 13px;\n  border-bottom: 1px solid #f0f0f0;\n"])));
var Inner = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  display: flex;\n"])));
var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  width: 100%;\n  flex-wrap: wrap;\n  flex: 1;\n"])));
var ContentContainer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  flex: 1;\n\n  @media screen and (max-width: 991px) {\n    flex: 1 1 100%;\n  }\n"])));
var ActionsContainer = styled.div.attrs({
  className: 'pl-2'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  @media (max-width: 991px) {\n    padding-left: 0 !important;\n  }\n"])));
var ActionsWrapper = styled.p(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  font-size: 12px;\n  border-bottom: 1px solid ", ";\n\n  &:hover {\n    opacity: 0.6;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
});
var Text = styled.p.attrs({
  className: 'mb-3'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\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"])), props => props.isHeader && "\n  font-size: 18px;\n  font-weight: 500;\n  color: " + props.theme.palette.primary + ";\n  ");
export { Message };
//# sourceMappingURL=index.js.map