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

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import styled from 'styled-components';
import { useCheckoutDiscountCode } from '@sentecacommerce-theme/lib';
import { IconClose } from '../Icons';
export var PromoCodeList = () => {
  var {
    handleDiscountCodeRemove,
    appliedCodes
  } = useCheckoutDiscountCode();

  var removeCode = code => () => {
    handleDiscountCodeRemove({
      code
    });
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, (appliedCodes == null ? void 0 : appliedCodes.map(data => {
    var {
      code
    } = data.discountCode.resource;
    return /*#__PURE__*/React.createElement(PromoCodeCard, {
      key: "Code__" + data.discountCode.resourceId
    }, /*#__PURE__*/React.createElement(Code, null, "#", code), /*#__PURE__*/React.createElement(RemoveContainer, {
      onClick: removeCode(code)
    }, /*#__PURE__*/React.createElement(IconClose, null)));
  })) || null);
};
var Code = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  font-size: 1.4rem;\n"])));
var RemoveContainer = styled.button.attrs({
  type: 'button',
  className: 'p-0'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  background: 0 !important;\n  width: 1rem !important;\n  min-height: 1.4rem !important;\n  height: 1rem !important;\n  line-height: 1 !important;\n\n  & svg {\n    width: 1rem;\n    height: 1rem;\n    fill: ", ";\n  }\n"])), (_ref) => {
  var {
    theme
  } = _ref;
  return theme.palette.secondary;
});
var PromoCodeCard = styled.div.attrs({
  className: 'mb-3'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  padding: 0.6rem 1.2rem;\n  background: ", ";\n  color: ", ";\n  border-radius: 0.3rem;\n\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
});
//# sourceMappingURL=index.js.map