<script lang="ts" setup>
defineProps<{
  question: Question;
  phase: string;
}>();

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

<template>
  <div
    class="flex flex-none 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.toString()"
          class="btn btn-primary btn-xl"
          :aria-label="element"
          :class="
            phase == 'exam'
              ? answer == null
                ? false
                : answer === value.toString()
                  ? '!btn-secondary'
                  : ''
              : `${
                  answer === value.toString()
                    ? 'outline-set-solid outline-2'
                    : ''
                } ${
                  question?.correct_answer?.toString() == value.toString()
                    ? ' btn-success'
                    : ' btn-error'
                }`
          "
          :checked="answer == null ? false : answer === value.toString()"
        />
      </div>
    </div>
  </div>
</template>
