<template>
    <div class="w-full  px-4" :class="mainSectionClass ? mainSectionClass : 'lg:w-6/12'">
        <div class="relative w-full mb-3" :class="subSectionClass">
            <label class="block uppercase text-blueGray-600 text-xs font-bold mb-2" :for="id"> {{ label }}
                <span class="text-red-600" v-if="required">*</span>
            </label>
            <textarea
                :class="inputClass"
                :id="id"
                :readonly="readonly"
                :required="required"
                :value="value"
                class="border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 bg-white rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                @input="updateInput"
                rows="4"
            ></textarea>
        </div>
    </div>
</template>

<script>
export default {
    props:["mainSectionClass", "subSectionClass", "labelClass", "inputClass", "label",  "id", "required", "value", "readonly"],
    name: 'textarea',
    methods: {
        updateInput(event) {
            this.$emit("update:value", event.target.value);
        },
    },
}
</script>
