<template>
  <label v-if="label" class="w-full space-y-1">
    <span class="text-base font-semibold text-base-content">{{ label }}</span>
    <textarea
      v-bind="$attrs"
      :class="fieldClass"
      :value="modelValue"
      @input="onInput"
    />
  </label>
  <textarea
    v-else
    v-bind="$attrs"
    :class="fieldClass"
    :value="modelValue"
    @input="onInput"
  />
</template>

<script setup lang="ts">
const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  label: {
    type: String,
    default: '',
  },
  mono: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue'])
const onInput = (event: Event) => {
  emit('update:modelValue', (event.target as HTMLTextAreaElement).value)
}

const fieldClass = computed(() =>
  ['textarea textarea-bordered w-full min-h-[120px]', props.mono ? 'font-mono' : ''].join(' ')
)
</script>
