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

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

import React from 'react';
import styled from 'styled-components';
import Link from 'next/link';
import { Button } from '../Common/Button';
import { useBanner } from '@sentecacommerce-theme/lib';

var Banner = props => {
  var {
    images
  } = props;
  var banner = useBanner(images);
  var {
    image,
    imageDesktop,
    buttonTitle,
    inverted,
    buttonCaption,
    bannerUrl,
    title,
    height
  } = banner || {};
  if (!banner) return null;
  var hasMobileImage = Boolean(image);
  return /*#__PURE__*/React.createElement(Link, {
    href: bannerUrl != null ? bannerUrl : '',
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/React.createElement(Container, {
    height: +(height || 700),
    className: "pb-3"
  }, /*#__PURE__*/React.createElement(Image, {
    src: imageDesktop || image,
    className: hasMobileImage ? 'd-none d-lg-block' : 'd-block'
  }), hasMobileImage && /*#__PURE__*/React.createElement(Image, {
    src: image || imageDesktop,
    className: "d-block d-lg-none"
  }), /*#__PURE__*/React.createElement(ButtonContainer, null, title && /*#__PURE__*/React.createElement(Title, {
    inverted: inverted,
    dangerouslySetInnerHTML: {
      __html: title
    }
  }), buttonTitle && /*#__PURE__*/React.createElement(ButtonCaption, {
    inverted: inverted
  }, buttonTitle), buttonCaption && /*#__PURE__*/React.createElement(ButtonWrapper, {
    className: "mt-3"
  }, /*#__PURE__*/React.createElement(Link, {
    href: bannerUrl != null ? bannerUrl : '',
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/React.createElement("button", {
    className: "p-0"
  }, /*#__PURE__*/React.createElement(Button, {
    as: "span",
    variant: inverted ? 'primary' : 'secondary',
    label: buttonCaption
  })))))));
};

var Container = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: relative;\n  height: ", "rem;\n  width: auto;\n  pointer-events: auto;\n  text-transform: none;\n  display: block;\n  overflow: hidden;\n\n  @media (max-width: ", ") {\n    height: 50rem;\n  }\n"])), props => (props.height || 700) / 10, (_ref) => {
  var {
    theme
  } = _ref;
  return theme.breakpoints.lg.min;
});
var Title = styled.h2(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  font-weight: 900;\n  font-size: 4.8rem;\n  text-transform: uppercase;\n  letter-spacing: -0.15rem;\n  line-height: 0.833333;\n  color: ", ";\n\n  @media (min-width: ", ") {\n    font-size: 7.2rem;\n  }\n"])), props => props.inverted ? props.theme.palette.secondary : props.theme.palette.primary, (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
});
var Image = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  opacity: 1;\n  object-position: 50% 50%;\n  font-family: 'object-fit:cover;object-position:50% 50%';\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  max-width: 100%;\n  display: block;\n"])));
var ButtonContainer = styled.div.attrs({
  className: 'd-flex mb-4 pb-3 ml-4 pl-3'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  bottom: 1.6rem;\n  left: 0;\n  width: 100%;\n  height: calc(100% - 1.6rem);\n  flex-direction: column;\n  justify-content: flex-end;\n"])));
var ButtonCaption = styled.h4(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), props => props.inverted ? props.theme.palette.secondary : props.theme.palette.primary);
var ButtonWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
export { Banner };
//# sourceMappingURL=banner.component.js.map