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

var _templateObject, _templateObject2;

import React from 'react';
import { usePrice, useCheckoutDiscountCode } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { IconClose, Price } from '../../../../../Common';
export var DiscountCode = (_ref) => {
  var {
    data
  } = _ref;
  var {
    price
  } = usePrice({
    price: (data == null ? void 0 : data.discountedAmount) || undefined // TODO: remove any after sdk update

  });
  var {
    handleDiscountCodeRemove
  } = useCheckoutDiscountCode();
  var {
    code
  } = data.discountCode.resource;
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CodeCon, null, "#", code, /*#__PURE__*/React.createElement("span", {
    className: "d-flex align-items-center justify-content-center"
  }, /*#__PURE__*/React.createElement(IconClose, {
    onClick: () => handleDiscountCodeRemove({
      code
    }),
    className: "pl-2"
  }))), /*#__PURE__*/React.createElement(PriceCon, null, /*#__PURE__*/React.createElement(Price, {
    currency: price.currency,
    size: "tiny",
    price: -price.value
  })));
};
var CodeCon = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-start pr-4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  line-height: 1;\n  font-weight: bold;\n\n  & svg {\n    width: 1.6rem;\n    cursor: pointer;\n    color: ", ";\n\n    &:hover {\n      color: ", ";\n    }\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.hint;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
});
var PriceCon = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-end'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  font-weight: bold;\n\n  & * {\n    font-size: 1.6rem !important;\n  }\n"])));
//# sourceMappingURL=index.js.map