<template>
  <b-card
    :title="text()"
    :img-src="imageSrc()"
    :img-alt="text()"
    img-top
    style="max-width: 20rem;"
    class="mb-4"
  >
  </b-card>
</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>
</style>
