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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

import React from 'react';
import styled from 'styled-components';
import { Button, Copy } from '../Common';
export var Caption = (_ref) => {
  var {
    title,
    subtitle,
    ctas,
    withGreyBox = false,
    align = 'center',
    subtitleBottom = false,
    small = false
  } = _ref;
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Background, {
    align: align,
    withGreyBox: withGreyBox
  }, !subtitleBottom && /*#__PURE__*/React.createElement(Copy, {
    html: subtitle
  }), /*#__PURE__*/React.createElement(Title, {
    small: small,
    className: "mb-3"
  }, title), subtitleBottom && /*#__PURE__*/React.createElement(Copy, {
    html: subtitle
  }), /*#__PURE__*/React.createElement(CTAList, {
    align: align,
    className: "mt-3"
  }, ctas == null ? void 0 : ctas.map((cta, index) => /*#__PURE__*/React.createElement(ButtonWrapper, {
    key: "cta-" + index
  }, /*#__PURE__*/React.createElement(Button, cta))))));
};
var alignMap = {
  center: 'center',
  right: 'flex-end',
  left: 'flex-start'
};
var Title = styled.h2(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  font-weight: 900;\n  font-size: ", ";\n  text-transform: uppercase;\n  letter-spacing: -0.15rem;\n  line-height: 1.1;\n  /* font-family: cursive; // TODO: update font famaly. On nike.com futura is used. */\n\n  @media (min-width: ", ") {\n    font-size: ", ";\n  }\n"])), props => props.small ? '3.2rem' : '4.8rem', (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.lg.min;
}, props => props.small ? '4.8rem' : '7.2rem');
var CTAList = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  @media (min-width: ", ") {\n    justify-content: ", ";\n  }\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.min;
}, props => alignMap[props.align]);
var ButtonWrapper = styled.div.attrs({
  className: 'py-0 px-2'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var Container = styled.div.attrs({
  className: 'mt-4'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
var Background = styled.div.attrs(props => ({
  className: 'd-flex' + (props.withGreyBox ? ' p-4' : '')
}))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n\n  height: 100%;\n\n  flex-direction: column;\n\n  @media (min-width: ", ") {\n    align-items: ", ";\n    text-align: ", ";\n  }\n"])), props => props.withGreyBox ? props.theme.palette.disabled : 'transparent', (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.min;
}, props => alignMap[props.align], props => alignMap[props.align]);
//# sourceMappingURL=caption.component.js.map