<template>
  <div class="tw-flex tw-flex-col">
    <label class="tw-mb-[10px]" :for="input.id"><span>{{ $t(input.label)
    }}<span v-if="input.required" class="required">*</span></span></label>
    <textarea :id="input.id" :class="[validation ? '' : 'tw-border-error-default']" :placeholder="input.placeholder"
      v-model="inputVal" rows="3"></textarea>
  </div>
</template>
<script>
export default {
  name: "ElementTextarea",
  props: {
    input: {
      type: Object,
    },
    default: {
      type: String,
    },
    validation: {
      type: Boolean,
    },
  },
  data() {
    return {
      value: "",
    };
  },
  mounted() {
    this.value = this.default;
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.value = val;
        this.$emit("change", val);
      },
    },
  },
};
</script>
<style lang="scss" scoped>

</style>