<template>
    <label class="w-full border border-solid focus-within:border-primary rounded-lg relative flex">
        <input
            :id="id"
            v-model="inner"
            :name="name"
            placeholder=" "
            class="bg-white rounded-lg border-0 focus:shadow-none focus:outline-none text-gray-600 text-left placeholder-white peer py-3 px-3 w-full h-auto"
        />
        <span
            class="transition-all duration-200 absolute text-gray-600 left-2 flex bg-white items-center -top-3 px-1 text-sm peer-placeholder-shown:bottom-0 peer-placeholder-shown:-top-0 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:bottom-auto peer-focus:text-sm"
            >{{ label }} <span class="text-red-800 ml-1">*</span></span
        >
    </label>
</template>

<script>
export default {
    props: {
        value: {},
        label: {},
        id: {},
        name: {},
    },

    computed: {
        inner: {
            get() {
                return this.value;
            },
            set(v) {
                this.$emit('input', v);
            },
        },
    },
};
</script>
