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

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

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

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