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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

import React from 'react';
import styled from 'styled-components';
import { useConfigState } from '@sentecacommerce-theme/lib';
import { Placeholder } from '../../../Common';
export var ProductPlaceholder = () => {
  var {
    imagesConfig
  } = useConfigState();
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Div, {
    className: "container-fluid",
    mobile: true
  }, /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "45%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "50%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "35%",
    className: "mb-4"
  })), /*#__PURE__*/React.createElement(Div, {
    mobile: true
  }, /*#__PURE__*/React.createElement(ImageFlex, {
    className: "g-1 mb-4"
  }, /*#__PURE__*/React.createElement(ImageContainer, {
    className: "col-8",
    imagesConfig: imagesConfig
  }, /*#__PURE__*/React.createElement(Placeholder, {
    image: true,
    absolute: true
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      minWidth: 16
    }
  }), /*#__PURE__*/React.createElement(ImageContainer, {
    className: "col-4",
    imagesConfig: imagesConfig
  }, /*#__PURE__*/React.createElement(Placeholder, {
    image: true,
    absolute: true
  })))), /*#__PURE__*/React.createElement(Flex, {
    className: "container-fluid"
  }, /*#__PURE__*/React.createElement(ImageFlex, {
    className: "g-1",
    desktop: true
  }, /*#__PURE__*/React.createElement(Placeholder, {
    image: true,
    halfOnDesktop: true
  }), /*#__PURE__*/React.createElement(Placeholder, {
    image: true,
    halfOnDesktop: true
  }), /*#__PURE__*/React.createElement(Placeholder, {
    image: true,
    halfOnDesktop: true
  }), /*#__PURE__*/React.createElement(Placeholder, {
    image: true,
    halfOnDesktop: true
  })), /*#__PURE__*/React.createElement(TextContainer, null, /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "55%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "85%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "35%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "20%",
    className: "mb-4"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "99%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "98%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "95%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "97%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Div, {
    mobile: true
  }, /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "40%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "35%",
    className: "mb-4"
  })), /*#__PURE__*/React.createElement(Div, {
    desktop: true
  }, /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "97%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "94%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "98%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "94%",
    className: "mb-4"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "98%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "95%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "97%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "40%",
    className: "mb-2"
  }), /*#__PURE__*/React.createElement(Placeholder, {
    text: true,
    width: "35%",
    className: "mb-4"
  })))));
};
var Container = styled.div.attrs({
  className: 'mx-auto mt-5'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  max-width: 144rem;\n"])));
var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  min-width: 100%;\n  max-width: 100%;\n  padding-bottom: ", "%;\n\n  @media (min-width: ", ") {\n    width: calc(50% - 0.8rem);\n    margin-bottom: 1.6rem;\n  }\n"])), props => props.imagesConfig.ratio.height / props.imagesConfig.ratio.width * 100, (_ref) => {
  var {
    theme
  } = _ref;
  return theme.breakpoints.lg.min;
});
var ImageFlex = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  max-width: 100vw;\n  overflow: hidden;\n  display: ", ";\n\n  @media (min-width: ", ") {\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: space-between;\n    width: calc(100% - 32rem - 2.2rem);\n  }\n"])), props => props.desktop ? 'none' : 'flex', (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var Div = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n\n  ", "\n\n  ", "\n"])), props => props.mobile && "\n        @media(min-width: " + props.theme.breakpoints.lg.min + ") {\n            display: none;\n        }\n    ", props => props.desktop && "\n        display: none;\n\n        @media(min-width: " + props.theme.breakpoints.lg.min + ") {\n            display: block;\n        }\n    ");
var Flex = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    display: flex;\n    justify-content: space-between;\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
});
var TextContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    min-width: 32rem;\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map