<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 }">
            <h3>Who <br> Am <br> I&nbsp; ?<br></h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';

const props = defineProps({
  title: String,
});

const isFlipped = ref(false);
</script>

<style lang="scss" scoped>
.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: rgba(76, 175, 80, 0.9); /* Green background with 30% opacity */
  background-image: url('../assets/question.png');
  background-size: 200%;
  background-position: 500px 500px;
  
  transition : 2s;
  
  &.animate{
    background-position: left;
  }

}


h3 {
  transform: translateZ(-60px) rotateY(180deg);
  padding:0.25rem 1rem;
  font-size: 2em;
  font-weight: bold;
  color: rgb(255, 31, 31);
  text-align: center;
  line-height: 1.5;
  border-radius: 5px;
  font-family: Arial, Helvetica, sans-serif;
  background-color: rgba(0, 0, 0, 0.486);
  box-shadow: 0px 0px 15px rgb(0, 0, 0);
}

</style>
