<template>
  <div id="player" class="mr-5 ml-5">
    <b-badge :variant="variant()">
      <b-icon-person-square />
      {{ name }}
      <b-icon-clock-history v-if="isReady === false" />
      <b-icon-check-circle v-if="isReady === true" />
    </b-badge>
    <b-img class="icon-card" v-for="index in nbCards" :key="index" fluid src="/img/unknown.svg" />
  </div>
</template>
<script>
export default {
  name: "Player",
  props: {
    name: String,
    nbCards: Number,
    isReady: { type: Boolean, required: false },
    isPlaying: { type: Boolean, required: false }
  },
  methods: {
    variant: function() {
      if (!this.isPlaying) return "light";
      else return Math.random() >= 0.5 ? "dark" : "danger";
    }
  }
};
</script>
<style>
img.icon-card {
  max-width: 20px;

}
</style>