<script setup lang="ts">
import { computed } from 'vue';

const props = defineProps<{
  label: string;
  modelValue: string;
}>();
const emit = defineEmits<{
  (event: 'update:modelValue', value: string): void;
}>();

const localValue = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value),
});
</script>

<template>
  <div>
    <label class="block text-sm font-medium text-gray-700">{{ label }}</label>
    <div class="mt-1 relative rounded-md shadow-sm">
      <textarea
        v-model="localValue"
        class="focus:ring-blue-500 focus:border-blue-500 block w-full border-gray-300 rounded-md"
        v-bind="$attrs"
      />
    </div>
  </div>
</template>
