<script setup lang="ts">
defineProps<{
  modelValue: string
  rows?: number
  placeholder?: string
  readonly?: boolean
}>()

const emit = defineEmits(['update:modelValue'])
</script>

<template>
  <textarea
    :value="modelValue"
    :rows="rows || 3"
    :placeholder="placeholder"
    :readonly="readonly"
    :style="{ backgroundColor: readonly ? '#ECF0F1' : '#FFFFFF' }"
    style="width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #CBD5E1; border-radius: 2px; font-size: 12px; font-weight: bold; outline: none; resize: vertical;"
    @input="emit('update:modelValue', ($event.target as HTMLTextAreaElement).value)"
  />
</template>
