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

var _templateObject, _templateObject2;

import React from 'react';
import { CheckoutFormStepsEnum, useCheckoutFormStep, useLocalLabels } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { StepTitle } from '../StepTitle';
export var CheckoutHeader = () => {
  var labels = useLocalLabels();
  var {
    currentStep
  } = useCheckoutFormStep();
  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(StepsNavigation, null, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
    className: "mx-4 d-flex"
  }, /*#__PURE__*/React.createElement(StepTitle, {
    number: 1,
    step: CheckoutFormStepsEnum.Basket,
    link: "/basket",
    title: labels.bagStepTitle,
    isPrev: true
  }), /*#__PURE__*/React.createElement(StepTitle, {
    number: 2,
    step: CheckoutFormStepsEnum.Shipping,
    title: labels.deliveryStepTitle,
    isPrev: currentStep !== CheckoutFormStepsEnum.Shipping
  }), /*#__PURE__*/React.createElement(StepTitle, {
    number: 3,
    step: CheckoutFormStepsEnum.Payment,
    title: labels.paymentStepTitle,
    isPrev: currentStep === CheckoutFormStepsEnum.Preview
  }), /*#__PURE__*/React.createElement(StepTitle, {
    number: 4,
    step: CheckoutFormStepsEnum.Preview,
    title: labels.completeStepTitle
  })))));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  max-width: 120rem;\n  margin: 0 auto;\n  width: 100%;\n"])));
var StepsNavigation = styled.div.attrs({
  className: 'd-flex justify-content-start'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map