<template>
  <div class="n-flex n-flex-wrap n-align-center n-stepper-header n-gap-2">
    <div
      v-for="(step, index) in steps"
      :key="index"
      tabindex="-1"
      :class="getHeadStyles(index + 1)"
    >
      <span class="n-stepper-step--step n-color-main-font n-text-body2" />
      <div class="n-stepper-label n-text-body3 n-font-normal">
        {{ step.title }}
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
  name: "NStepperHeader",
  inject: ["steps", "currentStep", "next", "prev", "goTo"],
  computed: {
    stepperProps() {
      return {
        currentStep: this.currentStep,
        goTo: this.goTo,
        next: this.next,
        prev: this.prev,
      };
    },
  },
  methods: {
    getHeadStyles(stepIndex) {
      const { currentStep } = this;
      let classes = "n-stepper-step n-flex n-align-center n-gap-2";

      if (currentStep === stepIndex) {
        classes += " n-stepper-step--active";
      } else if (currentStep > stepIndex) {
        classes += " n-stepper-step--complete";
      } else {
        classes += " n-stepper-step--pending";
      }

      return classes;
    },
  },
});
</script>

<style scoped>
@import url("./n-stepper-header.css");
</style>
