<template>
  <div class="card" @click="isFlipped = !isFlipped" :class="{ flipped: isFlipped }">
    <div class="card-content">
      <div class="card-back">
        <div class="card-back__frame"></div>
      </div>
      <div class="card-front">
        <div class="card-front__frame">
          <div class="card-front__content"
          :class="{ animate: isFlipped }"
          v-bind:style= "{ 'background-image': 'url(' + require('../assets/' + bg ) + ')'}">
            <h3>{{ title }}</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';
//import { useCardsStore } from '@/stores/cards'

const isFlipped = ref(false)

// const cardsStore = useCardsStore()

// const toggleCard = (id) => {
//   isFlipped.value = !isFlipped.value
//   cardsStore.reset();
//   const functionName = 'toggleCard' + id
//   cardsStore.toggleCard1();
  
//}

const props = defineProps({
  title: String,
  bg : String,
  //id : Number
});

</script>

<style lang="scss">
.card {
  position: relative;
  transform-style: preserve-3d;
  width: 200px;
  height: 300px;
  transition: 1.5s;
  transform-origin: center;
  cursor: pointer;
}

.card-content {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transition: 1.5s;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.flipped .card-content {
  transform: rotateY(180deg);
}

.card-back,
.card-front {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: grid;
  place-items: center;
}

.card-back__frame {
  transform-style: preserve-3d;
  height: 100%;
  width: 100%;
  background-position: center;
  background-image: url(../assets/back.svg);
}

.card-front__frame {
  background-image: url(../assets/face.svg);
  background-position: center;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  //overflow: hidden;
  
  display: grid;
  place-items: center;
  transform: translateZ(-2px);
}

.card-front__content {
  display: grid;
  place-items: center;
  transform: translateZ(-0px);
  background-color: rgb(117, 148, 138);
  height: 88%;
  width: 80%;
  transform-style: preserve-3d;
  border-radius: 12px;
  border: solid black 5px;
  //overflow: hidden; /* a pb here, it dismiss the translate Z*/
  position : relative;
  
  background-size: 300%;
  background-position: 500px 500px;
  
  transition : 2s;
  
  &.animate{
    background-position: center;
  }

  }


h3 {
  transform: translateZ(-60px) rotateY(180deg);
  font-size: 2em;
  font-weight: bold;
  color: rgb(255, 31, 31);
  text-align: center;
  line-height: 1.5;
  font-family: Arial, Helvetica, sans-serif;
}


</style>
