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

const tak_nie_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-row justify-around">
        <input
          type="radio"
          name="tak_nie"
          id="odp_tak"
          v-model="tak_nie_model"
          value="tak"
          class="hidden"
        />
        <label for="odp_tak">
          <div
            :class="`btn-answer ${
              tak_nie_model == 'tak' ? ' !bg-fuchsia-500' : ''
            }`"
          >
            TAK
          </div>
        </label>
        <input
          type="radio"
          name="tak_nie"
          id="odp_nie"
          v-model="tak_nie_model"
          value="nie"
          class="hidden"
        />
        <label for="odp_nie">
          <div
            :class="`btn-answer ${
              tak_nie_model == 'nie' ? ' !bg-fuchsia-500' : ''
            }`"
          >
            NIE
          </div>
        </label>
      </div>
    </div>
  </div>
</template>