<script lang="ts" setup>
defineProps<{
  question: AdvancedQuestion | undefined;
}>();

const abc_model = defineModel();
</script>

<template>
  <div class="flex flex-col gap-3">
    <div class="text-xl">{{ question?.pytanie }}</div>
    <div>
      <div class="flex flex-col">
        <input
          type="radio"
          name="abc"
          id="odp_a"
          v-model="abc_model"
          value="a"
          class="hidden"
        />
        <label for="odp_a">
          <div
            :class="`btn-answer ${abc_model == 'a' ? ' !bg-fuchsia-500' : ''}`"
          >
            A
          </div>
          {{ question?.odp_a }}
        </label>
        <input
          type="radio"
          name="abc"
          id="odp_b"
          v-model="abc_model"
          value="b"
          class="hidden"
        />
        <label for="odp_b">
          <div
            :class="`btn-answer ${abc_model == 'b' ? ' !bg-fuchsia-500' : ''}`"
          >
            B
          </div>
          {{ question?.odp_b }}
        </label>
        <input
          type="radio"
          name="abc"
          id="odp_c"
          v-model="abc_model"
          value="c"
          class="hidden"
        />
        <label for="odp_c">
          <div
            :class="`btn-answer ${abc_model == 'c' ? ' !bg-fuchsia-500' : ''}`"
          >
            C
          </div>
          {{ question?.odp_c }}
        </label>
      </div>
    </div>
  </div>
</template>

<style scoped>
.btn-answer {
  display: inline-block;
}
label {
  cursor: pointer;
}

label:hover .btn-answer {
  @apply bg-blue-300;
}

label:hover {
  @apply bg-slate-200;
}
</style>
