<script setup lang="ts">
import { defineProps, defineEmits, ref, watch } from 'vue';

const props = defineProps( {
    modelValue: {
        type: String,
        default: '',
    },
    name: {
        type: String,
    },
    required: {
        type: Boolean,
        default: false,
    },
    placeholder: {
        type: String,
        default: "",
    }
} );

const emit = defineEmits(['update:modelValue']);
const inputValue = ref(props.modelValue);
const updateValue = () => {
    emit('update:modelValue', inputValue.value);
};

// If the modelValue prop changes externally, update the local ref
watch(() => props.modelValue, (newVal) => {
    inputValue.value = newVal;
});
</script>

<template>
    <input
        type="text"
        :id="name"
        :name="name"
        class="mt-1 p-2 w-full border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500"
        :placeholder
        :required
        v-model="inputValue"
        @input="updateValue"
    >
</template>