<script setup lang="ts">
import InputText from 'primevue/inputtext'
import FieldShell from './FieldShell.vue'
import type { UiTextFieldType } from '../adapter/contracts'

const props = defineProps<{ modelValue: string; label: string; inputId?: string; type?: UiTextFieldType; disabled?: boolean; required?: boolean; error?: string; help?: string; placeholder?: string }>()
const emit = defineEmits<{ 'update:modelValue': [value: string]; blur: [event: FocusEvent] }>()
</script>

<template>
  <FieldShell :label="label" :input-id="inputId" :required="required" :error="error" :help="help" v-slot="field">
    <InputText
      :input-id="field.inputId"
      :model-value="modelValue"
      :type="type"
      :disabled="disabled"
      :invalid="field.invalid"
      :placeholder="placeholder"
      :aria-describedby="field.describedBy"
      :aria-required="field.required || undefined"
      @update:model-value="emit('update:modelValue', String($event ?? ''))"
      @blur="emit('blur', $event)"
    />
  </FieldShell>
</template>
