"use strict";

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

exports.__esModule = true;
exports.TopBrands = 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 _brands = require("../../../Brands/brands.hook");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var TopBrands = function TopBrands(_ref) {
  var defaultBackgroundImage = _ref.defaultBackgroundImage;

  var _useFeaturedBrands = (0, _brands.useFeaturedBrands)(),
      brands = _useFeaturedBrands.data;

  var _useConfigState = (0, _lib.useConfigState)(),
      assetKeys = _useConfigState.assetKeys;

  if (!(brands != null && brands.length)) return null;
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(List, null, brands.map(function (brand) {
    var _brand$getAssetByKey, _brand$getAssetByKey$, _brand$getAssetByKey$2;

    if (!brand) return null;
    var logo = (_brand$getAssetByKey = brand.getAssetByKey(assetKeys.brandLogo)) == null ? void 0 : (_brand$getAssetByKey$ = _brand$getAssetByKey.sources) == null ? void 0 : (_brand$getAssetByKey$2 = _brand$getAssetByKey$[0]) == null ? void 0 : _brand$getAssetByKey$2.url;
    return /*#__PURE__*/_react["default"].createElement("li", {
      className: "col-6 col-lg-12",
      key: brand.id
    }, /*#__PURE__*/_react["default"].createElement(_lib.Link, {
      href: brand.slug,
      passHref: true
    }, /*#__PURE__*/_react["default"].createElement("a", {
      className: "d-block"
    }, /*#__PURE__*/_react["default"].createElement(Brand, null, /*#__PURE__*/_react["default"].createElement(LogoWrapper, null, /*#__PURE__*/_react["default"].createElement("img", {
      src: logo || '',
      alt: brand.name,
      loading: "lazy"
    }))))));
  })));
};

exports.TopBrands = TopBrands;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Brand = _styledComponents["default"].article.attrs({
  className: 'px-3 py-2 d-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 9rem;\n  max-height: 9rem;\n  background: ", ";\n  position: relative;\n\n  & > h3 {\n    font-size: 1.5rem;\n  }\n\n  color: ", ";\n\n  &:hover {\n    background: rgba(0, 0, 0, 0.06);\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.whiteSmoke;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.hint;
});

var List = _styledComponents["default"].ul.attrs({
  className: 'row g-3'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var LogoWrapper = _styledComponents["default"].figure.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  z-index: 1;\n\n  & img {\n    max-width: 100%;\n    max-height: 7.2rem;\n    width: auto;\n    height: auto;\n    font-weight: bold;\n    ", "\n  }\n"])), function (props) {
  return props.withFilter ? 'filter: brightness(0) invert(1);' : '';
});
//# sourceMappingURL=index.js.map