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

var _templateObject;

import React from 'react';
import { isExpired, Link, useConfigState } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
var sizesMap = {
  1: '6',
  2: '12'
};
var desktopSizesMap = {
  1: '4',
  2: '8',
  3: '12'
};
export var ListingBanner = (_ref) => {
  var {
    expiry,
    mobileImage,
    desktopImage,
    alt,
    link,
    size = {
      desktop: 1,
      mobile: 2
    },
    fitImage
  } = _ref;
  var {
    imagesConfig
  } = useConfigState();
  var {
    ratio
  } = imagesConfig;
  var hasExpired = (expiry == null ? void 0 : expiry.validFrom) && (expiry == null ? void 0 : expiry.validTo) && isExpired(expiry == null ? void 0 : expiry.validFrom, expiry == null ? void 0 : expiry.validTo);
  var className = "col-" + sizesMap[size.mobile] + " col-lg-" + desktopSizesMap[size.desktop];
  var paddingBottomDesktop = ratio.height / ratio.width * 100 / size.desktop + "%";
  var paddingBottomMobile = ratio.height / ratio.width * 100 / size.mobile + "%";
  if (hasExpired) return null;
  return /*#__PURE__*/React.createElement("article", {
    className: className
  }, /*#__PURE__*/React.createElement(Link, {
    href: link || '#',
    passHref: Boolean(link)
  }, /*#__PURE__*/React.createElement("a", {
    className: "d-block",
    onClick: e => !link && e.preventDefault()
  }, /*#__PURE__*/React.createElement(Container, {
    paddingBottomDesktop: paddingBottomDesktop,
    paddingBottomMobile: paddingBottomMobile,
    sizeMobile: size.mobile,
    sizeDesktop: size.desktop
  }, /*#__PURE__*/React.createElement("img", {
    src: mobileImage || desktopImage,
    className: "d-block d-lg-none",
    alt: alt,
    style: {
      objectFit: fitImage
    }
  }), /*#__PURE__*/React.createElement("img", {
    src: desktopImage || mobileImage,
    className: "d-none d-lg-block",
    alt: alt,
    style: {
      objectFit: fitImage
    }
  })))));
};
var Container = styled.figure.attrs({
  className: 'd-block'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n\n  padding-bottom: ", ";\n\n  @media (min-width: ", ") {\n    padding-bottom: ", ";\n  }\n\n  & img {\n    pointer-events: none;\n    width: 100%;\n    height: 100%;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n"])), props => "calc(" + props.paddingBottomMobile + " - 6px * " + (props.sizeMobile - 1) + ")", props => props.theme.breakpoints.lg.min, props => "calc(" + props.paddingBottomDesktop + " - 10px * " + (props.sizeDesktop - 1) + ")");
//# sourceMappingURL=listingBanner.component.js.map