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

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

import React from 'react';
import styled from 'styled-components';
import { Typography, LazyImage } from '../../Common';
import Link from 'next/link';
export var Slide = (_ref) => {
  var {
    item
  } = _ref;
  var {
    image,
    name,
    styleId,
    price
  } = item;
  return /*#__PURE__*/React.createElement(Link, {
    href: "/checkout-voucher?price=" + price + "&style=" + styleId,
    passHref: true,
    prefetch: false
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(ImageContainer, null, /*#__PURE__*/React.createElement(LazyImage, {
    src: image,
    alt: name,
    background: "transparent",
    width: 1280,
    height: 1600
  })), /*#__PURE__*/React.createElement(ProductInfoContainer, null, /*#__PURE__*/React.createElement(ProductTitle, null, name))));
};
var Container = styled.a.attrs({
  className: 'd-block mb-5 pb-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
});
var ImageContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.sm.max;
});
var ProductInfoContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  cursor: pointer;\n"])));
var ProductTitle = styled(Typography).attrs({
  variant: 'base',
  as: 'span',
  className: 'mt-2 pt-1'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.sm.max;
});
var CTAWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\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"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.sm.max;
});
var PriceWrapper = styled.div.attrs({
  className: 'mt-3'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  font-size: 1.8rem;\n  margin-right: auto;\n\n  @media only screen and (", ") {\n    font-size: 1.4rem;\n  }\n"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.primary;
}, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.sm.max;
});
//# sourceMappingURL=Slide.js.map