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

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

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

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

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