<template>
  <div class="border p-12">
    <h2 class="text-5xl mb-12 leading-normal font-bold block">{{ label }}</h2>
    <textarea
      :value="modelValue"
      class="w-full border-gray-500 h-40"
      @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>
