<template lang="pug">
.wiki__cost(:style="calcStyle(cost)")
  icon(name="wiki-coin.svg")

  span {{ cost }}
</template>

<script>
import Icon from "./icon"

export const COST_COLOR_MAP = {
  1: "#9E9E9E",
  2: "#6FD0BB",
  3: "#5C89FF",
  4: "#BE89FF",
  5: "#F7B457",
}

export default {
  props: {
    cost: {
      type: Number,
      required: true,
    },
  },

  methods: {
    calcStyle(cost) {
      return `background-color: ${ COST_COLOR_MAP[cost] }`
    },
  },

  components: {
    Icon,
  },
}
</script>

<style lang="stylus">
.wiki__cost
  color: white
  font-size: 12px
  width: 34px
  height: 17px
  display: flex
  align-items: center
  justify-content: center

  > ._icon
    width: 18px !important
    height: 13px !important
    margin: 0px 2px 0px -4px
</style>
