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

var _templateObject;

import React from 'react';
import styled from 'styled-components';
import { RenderInjectedContent, getListingInsideContent } from '@sentecacommerce-theme/lib';
import { LineItem, LineItemPlaceholder } from '../../../Common';
export function ProductList(_ref) {
  var {
    hasSeoAgg,
    items,
    contentInside
  } = _ref;
  return /*#__PURE__*/React.createElement(Wrapper, {
    hasSeoAgg: hasSeoAgg
  }, items == null ? void 0 : items.map((item, index) => {
    if (item.isPlaceholder) {
      return /*#__PURE__*/React.createElement("article", {
        key: index + "__PLACEHOLDER"
      }, /*#__PURE__*/React.createElement(LineItemPlaceholder, null));
    }

    var content = getListingInsideContent(contentInside, index);
    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: "Product__" + item._id + "-" + item.variantId
    }, Boolean(content == null ? void 0 : content.length) && /*#__PURE__*/React.createElement(RenderInjectedContent, {
      componentList: content
    }), /*#__PURE__*/React.createElement("article", {
      "data-key": "Product__" + item._id + "-" + item.slug
    }, /*#__PURE__*/React.createElement(LineItem, {
      data: item
    })));
  }));
}
var Wrapper = styled.div.attrs(props => ({
  className: "row gx-2 gx-lg-3 gy-5 align-items-stretch " + (props.hasSeoAgg ? 'row-cols-2 row-cols-lg-3' : 'row-cols-2 row-cols-md-3 row-cols-lg-4')
}))(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map