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

const answer = defineModel<string | null | undefined>();
</script>

<template>
  <div
    class="flex flex-col gap-5 border-t px-4 py-5 border-slate-300 bg-slate-100"
  >
    <div class="text-xl">
      {{ question?.text }}
    </div>
    <div class="flex flex-col gap-3">
      <div
        v-for="[element, value] of Object.entries({
          A: question?.answer_a,
          B: question?.answer_b,
          C: question?.answer_c,
        })"
        :key="`btn_answer_${element}_${value}`"
      >
        <input
          :id="`odp_${element}`"
          v-model="answer"
          type="radio"
          name="abc"
          :value="element"
          class="hidden"
        />
        <label :for="`odp_${element}`">
          <div
            :class="answer === element ? ' !btn-secondary' : ''"
            class="btn btn-primary btn-lg"
          >
            {{ element }}
          </div>
          <span class="block">{{ value }}</span>
        </label>
      </div>
    </div>
  </div>
</template>

<style scoped>
label {
  @apply cursor-pointer flex flex-row gap-2 items-center;
  &:hover {
    @apply bg-slate-200;
  }
}
span {
  @apply text-lg;
}
</style>