<template>
  <div class="card">
    <div>
      <b-card
        title="Card Title"
        img-src="https://picsum.photos/600/300/?image=25"
        img-alt="Image"
        img-top
        tag="article"
        style="max-width: 20rem;"
        class="mb-2"
      >
        <b-card-text>
          Some quick example text to build on the card title and make up the
          bulk of the card's content.
        </b-card-text>

        <b-button href="#" variant="primary">Go somewhere</b-button>
      </b-card>
    </div>
    <img class="card-pic" v-bind:src="imageSrc()" />
    <p>{{ text() }}</p>
  </div>
</template>
<script>
export default {
  name: "Card",
  props: {
    value: String,
    color: String
  },
  methods: {
    imageSrc() {
      return `/img/${this.value}_of_${this.color}.png`;
    },
    text: function() {
      // Translate
      let valueText = {
        "2": "Deux",
        "3": "Trois",
        "4": "Quatre",
        "5": "Cinq",
        "6": "Six",
        "7": "Sept",
        "8": "Huit",
        "9": "Neuf",
        "10": "Dix",
        jack: "Valet",
        queen: "Dame",
        king: "Roi",
        ace: "As"
      }[this.value];
      let colorText = {
        hearts: "Coeur",
        spades: "Pique",
        clubs: "Trèfle",
        diamonds: "Carreau"
      }[this.color];

      // Capitalize
      valueText = valueText.charAt(0).toUpperCase() + valueText.slice(1);
      colorText = colorText.charAt(0).toUpperCase() + colorText.slice(1);
      return `${valueText} de ${colorText}`;
    }
  }
};
</script>
<style scoped>
.card-pic {
  max-width: 150px;
}
</style>
