"use strict";

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

exports.__esModule = true;
exports.LineItemPlaceholder = void 0;

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

var _lib = require("@sentecacommerce-theme/lib");

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Placeholder = require("../Placeholder");

var _templateObject, _templateObject2, _templateObject3;

var LineItemPlaceholder = function LineItemPlaceholder() {
  var _useConfigState = (0, _lib.useConfigState)(),
      imagesConfig = _useConfigState.imagesConfig;

  var ratio = imagesConfig.ratio.height / imagesConfig.ratio.width;
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Image, {
    style: {
      paddingBottom: ratio * 100 + "%"
    }
  }, /*#__PURE__*/_react["default"].createElement(_Placeholder.Placeholder, {
    absolute: true
  })), /*#__PURE__*/_react["default"].createElement(ContentContainer, null, /*#__PURE__*/_react["default"].createElement(_Placeholder.Placeholder, {
    width: "80%",
    className: "mt-3"
  }), /*#__PURE__*/_react["default"].createElement(_Placeholder.Placeholder, {
    width: "75%",
    className: "mt-2"
  }), /*#__PURE__*/_react["default"].createElement(_Placeholder.Placeholder, {
    width: "35%",
    className: "mt-2"
  }), /*#__PURE__*/_react["default"].createElement("div", {
    className: "pt-2"
  }), /*#__PURE__*/_react["default"].createElement(_Placeholder.Placeholder, {
    width: "20%",
    className: "mt-3",
    style: {
      height: '2rem'
    }
  })));
};

exports.LineItemPlaceholder = LineItemPlaceholder;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n"])));

var Image = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  padding-bottom: 100%;\n  position: relative;\n"])));

var ContentContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 13rem;\n"])));
//# sourceMappingURL=index.js.map