<script setup lang="ts">
import Textarea from 'primevue/textarea'

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

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

<style scoped>
.ks-textarea { width: 100%; border: 1px solid var(--ks-color-neutral-300); border-radius: var(--ks-radius-sm); padding: var(--ks-space-3); background: #fff; color: var(--ks-color-neutral-950); resize: vertical; }
</style>
