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

const abc_model = defineModel();
</script>

<template>
  <div class="flex flex-col gap-3 border-t p-4 border-slate-300 bg-slate-100">
    <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>
          <span class="block">{{ question?.odp_a }}</span>
        </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>
          <span class="block">{{ question?.odp_b }}</span>
        </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>
          <span class="block">{{ question?.odp_c }}</span>
        </label>
      </div>
    </div>
  </div>
</template>

<style scoped>
.btn-answer {
  @apply flex justify-center items-center text-center;
}
label {
  @apply cursor-pointer flex flex-row gap-2 items-center;
}

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

label:hover {
  @apply bg-slate-200;
}

/* label > div {
} */
</style>