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

var _templateObject, _templateObject2;

import React from 'react';
import styled from 'styled-components';
import { CheckoutPayment } from '../Payment';
import { CheckoutShipping } from '../Shipping';
import { useCheckoutFormStep, CheckoutFormStepsEnum } from '@sentecacommerce-theme/lib';
export var CheckoutSteps = () => {
  var {
    currentStep
  } = useCheckoutFormStep();
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BoxContainer, {
    isActive: currentStep === CheckoutFormStepsEnum.Shipping
  }, /*#__PURE__*/React.createElement(StepContent, null, currentStep === CheckoutFormStepsEnum.Shipping && /*#__PURE__*/React.createElement(CheckoutShipping, null))), /*#__PURE__*/React.createElement(BoxContainer, {
    isActive: currentStep === CheckoutFormStepsEnum.Payment
  }, /*#__PURE__*/React.createElement(StepContent, null, currentStep === CheckoutFormStepsEnum.Payment && /*#__PURE__*/React.createElement(CheckoutPayment, null))));
};
var StepContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var BoxContainer = styled.div.attrs({
  className: 'px-4'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  display: ", ";\n"])), props => props.isActive ? 'block' : 'none');
//# sourceMappingURL=index.js.map