<script setup lang="ts">
import type { FormFieldProps, FormError } from '@nuxt/ui'

const props = defineProps<Omit<FormFieldProps, 'error'> & {
  errors?: string[]
}>()

const formErrors = inject<Ref<FormError[]> | null>('form-errors', null)

const errorMessages = computed(() => {
  return props.errors ?? formErrors?.value?.map(e => e.message)
})
</script>

<template>
  <UFormField v-bind="props">
    <slot />
    <template v-if="errorMessages" #error>
      <p v-for="error in errorMessages">
        {{ error }}
      </p>
    </template>
  </UFormField>
</template>