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

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

import React from 'react';
import styled from 'styled-components';
import { usePrice } from '@sentecacommerce-theme/lib';
import { Typography } from '../../../Common';
export var Price = (_ref) => {
  var {
    price,
    discountedPrice
  } = _ref;
  var {
    price: originalPrice,
    discountPercentage,
    discountPrice
  } = usePrice({
    price: price,
    discountedPrice: discountedPrice
  });

  if (discountPrice) {
    return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(CurrentPrice, {
      isDiscount: true
    }, discountPrice.displayValue), /*#__PURE__*/React.createElement(OldPrice, null, originalPrice.displayValue), /*#__PURE__*/React.createElement(DiscountPercentageWrapper, null, /*#__PURE__*/React.createElement(DiscountPercentage, null, "-" + discountPercentage + "%"))));
  }

  return /*#__PURE__*/React.createElement(CurrentPrice, null, originalPrice.displayValue);
};
var CurrentPrice = styled(Typography).attrs(props => ({
  variant: 'base',
  color: props.isDiscount ? 'discount' : 'primary'
}))(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  // font-weight: 600;\n  ", "\n"])), props => !props.isDiscount && "\n    width: fit-content !important;\n    align-self: flex-end;\n    margin: 0 0 0 auto;\n    @media (max-width: " + props.theme.breakpoints.md.max + "){\n      margin: 0 auto 0 0;\n    }\n  ");
var OldPrice = styled(Typography).attrs({
  variant: 6,
  className: 'mx-2'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  text-decoration: line-through;\n  line-height: 1.2;\n  opacity: 0.5;\n"])));
var Container = styled.span.attrs({
  className: 'mr-0 ml-auto mr-lg-auto ml-lg-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: fit-content !important;\n  align-self: flex-end;\n"])));
var DiscountPercentageWrapper = styled.div.attrs({
  className: 'px-2 d-flex'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  border-radius: 0.3rem;\n  width: fit-content;\n  background-color: ", ";\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.discount;
});
var DiscountPercentage = styled(Typography).attrs({
  variant: 7,
  color: 'secondary'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  margin-top: 0.2rem;\n"])));
var Row = styled.div.attrs({
  className: 'd-flex align-items-center my-2'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map