<template>
  <UCheckbox v-model="modelValue" :label="label" />
</template>

<script setup lang="ts">
import type { FormOptionDto } from '~~/.api-client'

const props = defineProps<{
  formOptions: FormOptionDto[]
}>()

const emit = defineEmits<{
  (e: 'update:formOptions', value: FormOptionDto[]): void
}>()

const modelValue = computed({
  get: () => props.formOptions?.[0].value === 'true',
  set: (val) => {
    if (props.formOptions?.[0]) {
      const updatedModelValue = [...props.formOptions]
      updatedModelValue[0] = { ...updatedModelValue[0], value: val.toString() }
      emit('update:formOptions', updatedModelValue)
    }
  }
})

const label = computed(() => props.formOptions?.[0].label ?? '')
</script>
