"use strict";

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

exports.__esModule = true;
exports.BrandsGroup = 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 _Common = require("../../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var BrandsGroup = function BrandsGroup(_ref) {
  var brands = _ref.brands,
      groupKey = _ref.groupKey,
      containerRef = _ref.containerRef;

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

  if (!brands.length) return null;
  return /*#__PURE__*/_react["default"].createElement(Container, {
    ref: containerRef
  }, /*#__PURE__*/_react["default"].createElement(Key, null, groupKey), /*#__PURE__*/_react["default"].createElement(List, null, brands.map(function (brand) {
    var _logo$sources, _logo$sources$;

    var logo = brand.getAssetByKey(assetKeys.brandLogo);
    return /*#__PURE__*/_react["default"].createElement("li", {
      className: "col-12 col-md-6",
      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 == null ? void 0 : (_logo$sources = logo.sources) == null ? void 0 : (_logo$sources$ = _logo$sources[0]) == null ? void 0 : _logo$sources$.url) || imagesConfig.fallbackImage,
      alt: brand.name,
      loading: "lazy"
    })), /*#__PURE__*/_react["default"].createElement("h3", null, brand.name)))));
  })));
};

exports.BrandsGroup = BrandsGroup;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  & a,\n  article {\n    height: 100%;\n  }\n"])));

var Key = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'p',
  variant: 4,
  className: 'mb-2 mt-5'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  opacity: 0.4;\n  text-transform: uppercase;\n"])));

var Brand = _styledComponents["default"].article.attrs({
  className: 'px-3 py-1 d-flex align-items-center'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 5rem;\n  background: ", ";\n  border: 0.1rem solid ", ";\n  border-bottom: 0;\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\n  &:last-of-type {\n    border-bottom: 0.1rem solid ", ";\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.whiteSmoke;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.light;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.hint;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.light;
});

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

var LogoWrapper = _styledComponents["default"].figure.attrs({
  className: 'd-flex align-items-center mr-4'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 5rem;\n  height: 100%;\n\n  & img {\n    max-width: 100%;\n    max-height: 100%;\n    width: auto;\n    height: auto;\n  }\n"])));
//# sourceMappingURL=index.js.map