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

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

<template>
  <div
    class="flex flex-col gap-6 border-t px-4 py-5 border-base-300 bg-base-100"
  >
    <div class="text-xl">
      {{ question?.text }}
    </div>
    <div>
      <div class="flex flex-row justify-around">
        <input
          v-for="[element, value] of Object.entries({ TAK: true, NIE: false })"
          :id="`odp_${element}`"
          :key="`btn_answer_${element}`"
          v-model="answer"
          type="radio"
          name="tak_nie"
          :value="value"
          class="btn btn-primary btn-xl"
          :aria-label="element"
          :class="
            answer == null
              ? false
              : answer === value?.toString()
                ? '!btn-secondary'
                : ''
          "
          :checked="answer == null ? false : answer === value?.toString()"
        />
      </div>
    </div>
  </div>
</template>
