<template>
  <div class="container">
        <span class="icon is-large">
          <i class="fas fa-2x fa-piggy-bank"></i>
        </span>
        <nav class="level is-mobile">
          <div class="level-item">
            <div><p class="heading">CP</p>
                 <p class="subtitle">{{ wealth[0] }}</p>
            </div>
          </div>
          <div class="level-item">
            <div>
              <p class="heading">SP</p>
              <p class="subtitle">{{ wealth[1] }}</p>
            </div>
          </div>
          <div class="level-item">
            <div>
              <p class="heading">GP</p>
              <p class="subtitle">{{ wealth[2] }}</p>
            </div>
          </div>
          <div class="level-item">
            <div>
              <p class="heading">PP</p>
              <p class="subtitle">{{ wealth[3] }}</p>
            </div>
          </div>
        </nav>
  </div>
</template>

<script>
    export default {
        props: ["wealth"],
        data () { return {}; }
    }
</script>
