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 { useWishlistTotalCount, useBasketTotalCount, Link } from '@sentecacommerce-theme/lib';
export var SupportButtons = (_ref) => {
  var {
    data
  } = _ref;
  var favCount = useWishlistTotalCount() | 0;
  var bagCount = useBasketTotalCount();
  return /*#__PURE__*/React.createElement(Container, null, data.map(item => {
    var isBag = item.link === '/basket';
    var isFav = item.link === '/favorites';
    return /*#__PURE__*/React.createElement(ButtonWrapper, {
      className: "pt-3",
      key: "Item__" + item.link
    }, /*#__PURE__*/React.createElement(Link, {
      href: item.link
    }, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(IconWrapper, null, /*#__PURE__*/React.createElement("img", {
      src: item.icon,
      alt: item.label
    })), /*#__PURE__*/React.createElement(Label, null, item.label), isBag && bagCount > 0 && /*#__PURE__*/React.createElement(BagCount, null, bagCount), isFav && favCount > 0 && /*#__PURE__*/React.createElement(FavCount, null, favCount))));
  }));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  margin-top: 50px;\n  margin-left: -6px;\n"])));
var ButtonWrapper = styled.li(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  cursor: pointer;\n  text-decoration: none;\n  font-weight: 500;\n  display: flex;\n  position: relative;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
});
var Label = styled.p(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  font-weight: 500;\n  line-height: 1.5;\n"])));
var FavCount = styled.span(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 1000;\n  left: 2.1rem;\n  top: -0.6rem;\n  width: 1.5rem;\n  height: 1.5rem;\n  line-height: 1.5rem;\n  border-radius: 50%;\n  background-color: ", ";\n  color: ", ";\n  text-align: center;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.typography.fontFamily[1];
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.secondary;
});
var BagCount = styled(FavCount)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  left: 2.1rem;\n  top: -0.6rem;\n"])));
var IconWrapper = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  width: 3.6rem;\n  text-align: center;\n\n  & img {\n    width: 2.4rem;\n    height: auto;\n  } \n"])));
//# sourceMappingURL=index.js.map