<template>
  <label v-if="label" class="w-full space-y-2">
    <span class="text-sm font-bold uppercase tracking-[0.12em] text-[#8a7761]">{{ 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(() =>
  ['w-full min-h-[120px] rounded-[24px] border-0 bg-[#f6f1ea] px-5 py-4 text-[#2f2418] shadow-none outline-none placeholder:text-[#9b8d79]', props.mono ? 'font-mono' : ''].join(' ')
)
</script>
