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

const abc_model = defineModel();
</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?.pytanie }}</div>
    <div>
      <div class="flex flex-col gap-3">
        <input
          type="radio"
          name="abc"
          id="odp_a"
          v-model="abc_model"
          value="a"
          class="hidden"
        />
        <label for="odp_a">
          <div
            :class="`btn btn-primary btn-lg ${
              abc_model == 'a' ? ' !btn-secondary' : ''
            }`"
          >
            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 btn-primary btn-lg ${
              abc_model == 'b' ? ' !btn-secondary' : ''
            }`"
          >
            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 btn-primary btn-lg ${
              abc_model == 'c' ? ' !btn-secondary' : ''
            }`"
          >
            C
          </div>
          <span class="block">{{ question?.odp_c }}</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>