<template>
    <div class="input-group">
        <input
            :id="name"
            class="form-control"
            :type="type"
            v-model="inputValue"
            :maxLength="maxlength"
            :placeholder="isLabel ? '' : title"
        />
        <button class="btn btn-primary" type="button" @click="handleSubmit">확인</button>
    </div>
    <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
        {{ title }}을 확인해주세요.
    </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// Props 정의
const props = defineProps({
    title: {
        type: String,
        default: '라벨',
    },
    name: {
        type: String,
        default: 'nameplz',
    },
    isEssential: {
        type: Boolean,
        default: false,
    },
    type: {
        type: String,
        default: 'text',
    },
    modelValue: {
        type: String,
        default: '',
    },
    maxlength: {
        type: Number,
        default: 30,
    },
    isAlert: {
        type: Boolean,
        default: false,
    },
    isLabel: {
        type: Boolean,
        default: true,
    },
});

// Emits 정의
const emits = defineEmits(['update:modelValue', 'submit']);

// 로컬 상태로 사용하기 위한 `inputValue`
const inputValue = ref(props.modelValue);

// 부모로 데이터 업데이트
watch(inputValue, (newValue) => {
    emits('update:modelValue', newValue);
});

// 초기값 동기화
watch(() => props.modelValue, (newValue) => {
    if (inputValue.value !== newValue) {
        inputValue.value = newValue;
    }
});

// 버튼 클릭 시 부모로 submit 이벤트 전달
const handleSubmit = () => {
    emits('submit', inputValue.value);
};
</script>

<style scoped>
.invalid-feedback {
    display: none;
    color: red;
    font-size: 0.875rem;
    margin-top: 4px;
}

.display-block {
    display: block;
}
</style>
