<template>
  <div>
    <div
      class="step"
      :class="{
        final: this.final,
        done: this.getSolutionState.isDone(order),
        current: this.getSolutionState.isCurrent(step_id),
        error: this.getSolutionState.isError(step_id),
      }"
    >
      {{ step_name }}
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  props: ["step_name", "step_id", "final", "order"],

  computed: {
    ...mapGetters(["getSolutionState"]),
  },
};
</script>

<style scoped>
.step {
  border-radius: 50%;
  border-color: #faf9f8;
  border-width: 8px;
  border-style: solid;
  height: 152px;
  width: 152px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  color: whitesmoke;
  font-weight: lighter;
  font-size: 1.2em;
  color: #AAA;
    background: #EEE
  /* text-align: center;/ */
}

.done {
  background: #79af50aa;
  color: whitesmoke
}
.current {
  background: var(--insert-light);
  font-weight: bold;
  color: whitesmoke;
}

.error {
  background: #af5350aa;
}
</style>