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

var _templateObject, _templateObject2;

import React from 'react';
import styled from 'styled-components';
import { useConfigState, useOnScrollToBottom, useWishlistItems } from '@sentecacommerce-theme/lib';
import { Header } from '../Header';
import { FavoritePlaceholder, ProductCard } from './Components';
import { Typography } from '../Common';
export var Favorites = (_ref) => {
  var {
    title,
    labels
  } = _ref;
  var {
    wishlist
  } = useConfigState();
  var {
    items,
    fetchMore,
    showPlaceholders
  } = useWishlistItems({
    limit: wishlist.limit
  });
  useOnScrollToBottom({
    callback: fetchMore,
    isDisabled: showPlaceholders,
    threshold: 420
  });
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Header, {
    small: true,
    isTopTitle: true,
    content: title
  }), !showPlaceholders && !(items != null && items.length) && /*#__PURE__*/React.createElement(EmptyWishlistContainer, null, labels.empty), /*#__PURE__*/React.createElement("div", {
    className: "row g-3 g-md-4 g-lg-5"
  }, items == null ? void 0 : items.map(item => /*#__PURE__*/React.createElement(ProductCard, {
    labels: labels,
    data: item,
    key: item == null ? void 0 : item._id
  }))), showPlaceholders && /*#__PURE__*/React.createElement(FavoritePlaceholder, null));
};
var Container = styled.section.attrs({
  className: 'container-fluid'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var EmptyWishlistContainer = styled(Typography).attrs({
  className: 'd-flex pt-4 pt-lg-0 align-items-lg-center justify-content-center',
  variant: 5,
  as: 'p'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  height: 28rem;\n  position: relative;\n  text-align: center;\n"])));
//# sourceMappingURL=favorites.component.js.map