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

const tak_nie_model = defineModel();
</script>

<template>
  <div
    class="flex flex-col gap-6 border-t px-4 py-5 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"
          v-for="tn in ['tak', 'nie']"
          :id="`odp_${tn}`"
          v-model="tak_nie_model"
          :value="tn"
          class="btn btn-primary btn-xl"
          :aria-label="tn.toUpperCase()"
          :class="`${tak_nie_model == tn ? ' !btn-secondary' : ''}`"
          :checked="tak_nie_model == tn"
        />
      </div>
    </div>
  </div>
</template>
