<template>
  <div class="column bg-grey-4 rounded-card q-px-xl q-pt-md">
    <div class="row no-wrap items-center q-pb-md">
      <div class="text-h6" style="flex-grow: 2;">
        {{ $t(question) }}
      </div>
      <div class="q-pl-md">
        <q-btn
          @click="showAnswer=!showAnswer"
          round unelevated color="white"
          >
          <q-icon
            name="add"
            :color="showAnswer ? 'primary' : 'grey'"
            :class="showAnswer ? 'icon-rotated' : 'icon-rotated-back'"
          />
        </q-btn>
      </div>
    </div>
    <q-slide-transition>
      <div v-if="showAnswer">
        <div class="text-body text-grey-9 q-pb-md">
          {{ $t(answer) }}
        </div>
      </div> 
    </q-slide-transition>
  
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'

  defineProps({
    question: String,
    answer: String
  })

  const showAnswer = ref(false)
</script>

<style scoped>
  .icon-rotated {
    transition: transform 0.3s ease;
    transform: rotate(45deg);
  }

  .icon-rotated-back {
    transition: transform 0.3s ease;
    transform: rotate(0deg);
  }
</style>
