"use strict";

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

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

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

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

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

var _Common = require("../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;

var Caption = function Caption(_ref) {
  var title = _ref.title,
      subtitle = _ref.subtitle,
      ctas = _ref.ctas,
      _ref$withGreyBox = _ref.withGreyBox,
      withGreyBox = _ref$withGreyBox === void 0 ? false : _ref$withGreyBox,
      _ref$align = _ref.align,
      align = _ref$align === void 0 ? 'center' : _ref$align,
      _ref$subtitleBottom = _ref.subtitleBottom,
      subtitleBottom = _ref$subtitleBottom === void 0 ? false : _ref$subtitleBottom,
      _ref$small = _ref.small,
      small = _ref$small === void 0 ? false : _ref$small;
  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Background, {
    align: align,
    withGreyBox: withGreyBox
  }, !subtitleBottom && /*#__PURE__*/_react["default"].createElement(_Common.Copy, {
    html: subtitle
  }), /*#__PURE__*/_react["default"].createElement(Title, {
    small: small,
    className: "mb-3"
  }, title), subtitleBottom && /*#__PURE__*/_react["default"].createElement(_Common.Copy, {
    html: subtitle
  }), /*#__PURE__*/_react["default"].createElement(CTAList, {
    align: align,
    className: "mt-3"
  }, ctas == null ? void 0 : ctas.map(function (cta, index) {
    return /*#__PURE__*/_react["default"].createElement(ButtonWrapper, {
      key: "cta-" + index
    }, /*#__PURE__*/_react["default"].createElement(_Common.Button, cta));
  }))));
};

exports.Caption = Caption;
var alignMap = {
  center: 'center',
  right: 'flex-end',
  left: 'flex-start'
};

var Title = _styledComponents["default"].h2(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (props) {
  return props.small ? '3.2rem' : '4.8rem';
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.lg.min;
}, function (props) {
  return props.small ? '4.8rem' : '7.2rem';
});

var CTAList = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n\n  @media (min-width: ", ") {\n    justify-content: ", ";\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.md.min;
}, function (props) {
  return alignMap[props.align];
});

var ButtonWrapper = _styledComponents["default"].div.attrs({
  className: 'py-0 px-2'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Container = _styledComponents["default"].div.attrs({
  className: 'mt-4'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var Background = _styledComponents["default"].div.attrs(function (props) {
  return {
    className: 'd-flex' + (props.withGreyBox ? ' p-4' : '')
  };
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (props) {
  return props.withGreyBox ? props.theme.palette.disabled : 'transparent';
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.md.min;
}, function (props) {
  return alignMap[props.align];
}, function (props) {
  return alignMap[props.align];
});
//# sourceMappingURL=caption.component.js.map