<script setup lang="ts">
import type { XErrors } from '~/types/error'

defineProps<{
  id?: string
  errors?: XErrors
}>()
</script>

<template>
  <div class="grow">
    <slot />
    <!-- Always reserve space for error message to prevent CLS -->
    <div class="field-error-info">
      {{ (id && errors?.[id]) ? errors[id]?.message : '' }}
    </div>
  </div>
</template>
