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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import styled from 'styled-components';
import { useConfigState, Link } from '@sentecacommerce-theme/lib';
import { Typography } from '../../../Common';
export var BrandsGroup = (_ref) => {
  var {
    brands,
    groupKey,
    containerRef
  } = _ref;
  var {
    imagesConfig,
    assetKeys
  } = useConfigState();
  if (!brands.length) return null;
  return /*#__PURE__*/React.createElement(Container, {
    ref: containerRef
  }, /*#__PURE__*/React.createElement(Key, null, groupKey), /*#__PURE__*/React.createElement(List, null, brands.map(brand => {
    var _logo$sources, _logo$sources$;

    var logo = brand.getAssetByKey(assetKeys.brandLogo);
    return /*#__PURE__*/React.createElement("li", {
      className: "col-12 col-md-6",
      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 == 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.createElement("h3", null, brand.name)))));
  })));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  & a,\n  article {\n    height: 100%;\n  }\n"])));
var Key = styled(Typography).attrs({
  as: 'p',
  variant: 4,
  className: 'mb-2 mt-5'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  opacity: 0.4;\n  text-transform: uppercase;\n"])));
var Brand = styled.article.attrs({
  className: 'px-3 py-1 d-flex align-items-center'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.whiteSmoke;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.light;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.hint;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.light;
});
var List = styled.ul.attrs({
  className: 'row g-0 g-md-3'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var LogoWrapper = styled.figure.attrs({
  className: 'd-flex align-items-center mr-4'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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