<template>
  <div>
    <div
      class="ns-bubble"
      v-bind:style="{ backgroundColor: primaryColor }"
      v-for="n in Math.floor(score)"
      v-bind:key="n.index"
    ></div>
    <div
      class="ns-bubble"
      style="background-color: #eef0f6"
      v-if="(score * 10) % 10 > 0"
    >
      <div
        style="height: 100%"
        v-bind:style="{
          width: ((score * 10) % 10) * 10 + '%',
          backgroundColor: primaryColor,
        }"
      ></div>
    </div>
    <div
      class="ns-bubble"
      :key="n"
      style="background-color: #eef0f6"
      v-for="n in Math.floor(5 - score)"
    ></div>
  </div>
</template>

<script>
export default {
  name: "scoreBubble",
  props: ["score"],
  computed: {
    primaryColor: function () {
      const grade = Math.floor(this.score);
      if (grade === 1) return "#FF9061";
      else if (grade === 2) return "#FFE773";
      else if (grade === 3) return "#44E27B";
      else if (grade === 4) return "#2EAEF6";
      else if (grade === 5) return "#3E79FF";
      return "3E79FF";
    },
  },
};
</script>

<style></style>
