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

defineProps<{ modelValue: string; inputId?: string; type?: UiTextFieldType; disabled?: boolean; invalid?: boolean; placeholder?: string }>()
defineEmits<{ 'update:modelValue': [value: string]; blur: [event: FocusEvent] }>()
</script>

<template>
  <InputText
    class="ks-input"
    :id="inputId"
    :model-value="modelValue"
    :type="type"
    :disabled="disabled"
    :invalid="invalid"
    :placeholder="placeholder"
    @update:model-value="$emit('update:modelValue', String($event ?? ''))"
    @blur="$emit('blur', $event)"
  />
</template>

<style scoped>
.ks-input { width: 100%; min-height: var(--ks-control-height); border: 1px solid var(--ks-color-neutral-300); border-radius: var(--ks-radius-sm); padding: 0 var(--ks-space-3); background: #fff; color: var(--ks-color-neutral-950); }
.ks-input[aria-invalid='true'] { border-color: var(--ks-color-danger); }
</style>
