<template>
  <div>
    <div class="pile">{{ nbCardsInHeroesPile }}</div>
    <button
      class="btn btn-primary"
      v-if="nbCardsToDraw > 0"
      @click="draw(nbCardsToDraw)"
    >
      Draw {{ nbCardsToDraw }} Heroes
    </button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  props: ['nbCardsInHeroesPile', 'nbCardsToDraw'],
  methods: {
    ...mapActions({
      draw: 'game/draw'
    })
  }
};
</script>

<style scoped>
.pile {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
  width: 100px;
  background-color: brown;
  color: antiquewhite;
}
</style>
