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

<script setup>
import {computed} from 'vue';
const emit = defineEmits(['update:modelValue']);
const props = defineProps({
    modelValue: {
        required: true,
        validator: (value) => typeof value === 'string',
    },
    field: {
        required: true,
        validator: (value) =>
            hasKeys(value, ['required', 'key', 'columns', 'name', 'default']) &&
            typeof value.required === 'boolean' &&
            typeof value.key === 'string' &&
            value.key.length > 0 &&
            typeof value.name === 'string' &&
            value.name.length > 0 &&
            hasKeys(value.columns, ['mobile', 'desktop', 'tablet']),
    },
});

const inner = computed({
    get: () => props.modelValue,
    set: (v) => emit('update:modelValue', v),
});
</script>
