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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { Link, useConfigState } from '@sentecacommerce-theme/lib';
import { useFeaturedBrands } from '../../../Brands/brands.hook';
export var TopBrands = (_ref) => {
  var {
    defaultBackgroundImage
  } = _ref;
  var {
    data: brands
  } = useFeaturedBrands();
  var {
    assetKeys
  } = useConfigState();
  if (!(brands != null && brands.length)) return null;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(List, null, brands.map(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.createElement("li", {
      className: "col-6 col-lg-12",
      key: brand.id
    }, /*#__PURE__*/React.createElement(Link, {
      href: brand.slug,
      passHref: true
    }, /*#__PURE__*/React.createElement("a", {
      className: "d-block"
    }, /*#__PURE__*/React.createElement(Brand, null, /*#__PURE__*/React.createElement(LogoWrapper, null, /*#__PURE__*/React.createElement("img", {
      src: logo || '',
      alt: brand.name,
      loading: "lazy"
    }))))));
  })));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Brand = styled.article.attrs({
  className: 'px-3 py-2 d-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.whiteSmoke;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
var List = styled.ul.attrs({
  className: 'row g-3'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var LogoWrapper = styled.figure.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), props => props.withFilter ? 'filter: brightness(0) invert(1);' : '');
//# sourceMappingURL=index.js.map