"use strict";

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

exports.__esModule = true;
exports.Slide = 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 _link = _interopRequireDefault(require("next/link"));

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

var Slide = function Slide(_ref) {
  var item = _ref.item;
  var image = item.image,
      name = item.name,
      styleId = item.styleId,
      price = item.price;
  return /*#__PURE__*/_react["default"].createElement(_link["default"], {
    href: "/checkout-voucher?price=" + price + "&style=" + styleId,
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(ImageContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyImage, {
    src: image,
    alt: name,
    background: "transparent",
    width: 1280,
    height: 1600
  })), /*#__PURE__*/_react["default"].createElement(ProductInfoContainer, null, /*#__PURE__*/_react["default"].createElement(ProductTitle, null, name))));
};

exports.Slide = Slide;

var Container = _styledComponents["default"].a.attrs({
  className: 'd-block mb-5 pb-4'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-decoration: none;\n  width: 100%;\n  overflow: hidden;\n  position: relative;\n  background-color: ", ";\n  transition: all 0.2s ease-in-out;\n\n  &:hover {\n    opacity: 0.8;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.secondary;
});

var ImageContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  overflow: hidden;\n  position: relative;\n  text-align: center;\n  width: 100%;\n  padding-bottom: 100%;\n  height: 0;\n\n  &:after {\n    content: '';\n    display: block;\n    background: rgb(34, 34, 34, 0.05);\n  }\n\n  & img,\n  & > div,\n  &:after {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    left: 0;\n  }\n\n  @media only screen and (", ") {\n    height: auto;\n  }\n  cursor: pointer;\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.sm.max;
});

var ProductInfoContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  cursor: pointer;\n"])));

var ProductTitle = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 'base',
  as: 'span',
  className: 'mt-2 pt-1'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  line-height: 1.2rem;\n  margin-bottom: 0;\n  white-space: normal;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n  line-height: 2rem;\n  height: 100%;\n  letter-spacing: normal;\n\n  @media only screen and (", ") {\n    font-size: 1.4rem;\n    margin-top: 1rem;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.sm.max;
});

var CTAWrapper = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  align-items: center;\n  display: flex !important;\n\n  @media only screen and (", ") {\n    padding: 0 0 1.5rem 1.5rem;\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.sm.max;
});

var PriceWrapper = _styledComponents["default"].div.attrs({
  className: 'mt-3'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  color: ", ";\n  font-size: 1.8rem;\n  margin-right: auto;\n\n  @media only screen and (", ") {\n    font-size: 1.4rem;\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.primary;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.sm.max;
});
//# sourceMappingURL=Slide.js.map