<template>
  <div class="flex items-center justify-center">
    <p class="text-sm font-medium text-gray-900">
      {{ steps[currentStep - 1].name }}
    </p>
    <ol role="list" class="ml-4 flex items-center space-x-5">
      <li v-for="step in steps" :key="step.name">
        <!-- completed steps -->
        <div
          v-if="step.number < currentStep"
          @click="$emit('goStepBack', step.number)"
          class="progress-item block h-2.5 w-2.5 cursor-pointer rounded-full"
          :style="colorStyles"
        >
          <span class="sr-only">{{ step.name }}</span>
        </div>
        <!-- current step -->
        <div
          v-else-if="step.number === currentStep"
          class="relative flex items-center justify-center"
          aria-current="step"
        >
          <span class="absolute flex h-5 w-5 p-px" aria-hidden="true">
            <span
              class="progress-item-light-ring h-full w-full rounded-full"
              :style="colorStyles"
            />
          </span>
          <span
            class="progress-item relative block h-2.5 w-2.5 rounded-full"
            :style="colorStyles"
            aria-hidden="true"
          />
          <span class="sr-only">{{ step.name }}</span>
        </div>
        <!-- this is upcoming step so we don't have a emit from here -->
        <div
          v-else
          class="block h-2.5 w-2.5 rounded-full bg-gray-200 hover:bg-gray-400"
        >
          <span class="sr-only">{{ step.name }}</span>
        </div>
      </li>
    </ol>
  </div>
</template>

<script>
import { COLOR_CONFIG } from "../../colorConfig";

export default {
  name: "CProgress",
  props: {
    steps: {
      type: Array,
      required: true,
    },
    currentStep: {
      type: Number,
      require: true,
    },
    preferredColor: {
      type: String,
      default: "indigo",
    },
  },

  computed: {
    colorStyles() {
      const colors = COLOR_CONFIG[this.preferredColor] || COLOR_CONFIG.indigo;
      return {
        "--progress-item-color": colors.shade600,
        "--progress-item-hover-color": colors.shade900,
        "--progress-item-light-ring-color": colors.shade200,
      };
    },
  },
};
</script>

<style scoped>
.progress-item {
  background-color: var(--progress-item-color);
}
.progress-item:hover {
  background-color: var(--progress-item-hover-color);
}
.progress-item-light-ring {
  background-color: var(--progress-item-light-ring-color);
}
</style>
