<template>
    <div class="w-full px-4" :class="size ? size : '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"
                :class="labelClass"
            >
                {{ label }}
                <span class="lowercase font-semibold">{{ sublabel }}</span>
                <span class="text-red-600" v-if="required">*</span>
            </label>
            <input
                :id="id"
                :readonly="readonly"
                :type="type"
                :required="required"
                :value="value"
                class="bg-white border-0 px-3 py-3 placeholder-blueGray-300 text-blueGray-600 rounded text-sm shadow focus:outline-none focus:ring w-full ease-linear transition-all duration-150"
                :class="inputClass"
                @input="updateInput"
                @wheel="$event.target.blur()"
                :autofocus="autofocus"
                step="any"
                :tabindex="tabindex"
                :min="min"
            />
            <span v-if="error" class="text-red-600">{{ error }}</span>
        </div>
    </div>
</template>

<script>
/**
 * @props mainSectionClass
 * @props subSectionClass
 * @props labelClass
 * @props inputClass
 * @props label
 * @props type
 * @props id
 * @props required
 * @props value
 * @props readonly
 */
export default {
    props: [
        "mainSectionClass",
        "subSectionClass",
        "sublabel",
        "labelClass",
        "inputClass",
        "label",
        "tabindex",
        "type",
        "id",
        "required",
        "value",
        "readonly",
        "error",
        "autofocus",
        "size",
        "min",
    ],

    name: "input",
    methods: {
        updateInput(event) {
            this.$emit("update:value", event.target.value);
        },
    },
};
</script>


<style scoped>
input:read-only {
    background-color: rgb(236, 236, 236);
}
</style>
