<template>
  <div>
    <div v-if="label" class="mb-2 block">{{ label }}</div>
    <textarea
      :value="modelValue"
      class="h-40 w-full border-gray-500 placeholder-gray-800 placeholder-opacity-100"
      :data-cy="`it-textarea-${cyKey}`"
      :disabled="disabled"
      :placeholder="placeholder"
      @input="onInput"
    />
  </div>
</template>

<script setup lang="ts">
export interface Props {
  modelValue: string;
  label?: string;
  placeholder?: string;
  cyKey?: string;
  disabled?: boolean;
}

withDefaults(defineProps<Props>(), {
  label: undefined,
  cyKey: "default",
  placeholder: "",
});
const emit = defineEmits(["update:modelValue"]);

const onInput = (event: Event) => {
  const target = event.target as HTMLInputElement;
  emit("update:modelValue", target.value);
};
</script>
