<template>
  <div class="seq seq--full">
    <p class="seq__title">{{ orderText }}{{ question.title }}</p>

    <div class="seq__answers">
      <CheckboxField
        v-for="answer in question.answers"
        :key="answer.id"
        :model-value="selectedId === answer.id"
        :label="answer.title"
        @change="onSelect(answer.id)"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import CheckboxField from '@/components/form/CheckboxField.vue'

const props = defineProps({
  question: { type: Object, required: true },
  order: { type: Number, default: 0 },
  modelValue: { type: [String, Number, null], default: null },
})

const emit = defineEmits(['update:modelValue'])

const selectedId = computed(() => props.modelValue)

const orderText = computed(() => (props.order ? `${props.order} - ` : ''))

const onSelect = (id) => {
  emit('update:modelValue', id === selectedId.value ? null : id)
}
</script>

<style lang="scss" scoped>
.seq {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1rem 0;

  &--full {
    grid-column: 1 / -1;
  }

  &__title {
    font-family: var(--font-family-fa);
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #a7a7a7;
    margin: 0;
  }

  &__answers {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem 1.5rem;
  }
}
</style>
