<template>
  <div>
    <h2 class="heading-1 mb-8 block">{{ label }}</h2>
    <textarea
      :value="modelValue"
      class="h-40 w-full border-gray-500"
      @input="onInput"
    />
  </div>
</template>

<script setup lang="ts">
defineProps<{
  modelValue: string;
  label: string;
}>();
const emit = defineEmits(["update:modelValue"]);

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