<template>
    <div class="input-group mb-3 d-flex">
        <input
            type="text"
            class="form-control"
            placeholder="Search"
            v-model="searchQuery"
            @keyup.enter="search"
            @input="preventLeadingSpace"
        />
        <button type="button" class="btn btn-primary" @click="search">
            <i class="bx bx-search bx-md"></i>
        </button>
    </div>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
    maxlength: {
        type: Number,
        default: 30,
        required: false,
    },
});

const emits = defineEmits(["update:data"]);
const searchQuery = ref("");

const search = function () {
    // Type Number 일때 maxlength 적용 안됨 방지
    if (searchQuery.value.length > props.maxlength) {
        searchQuery.value = searchQuery.value.slice(0, props.maxlength);
    }
    emits("update:data", searchQuery.value);
};

const preventLeadingSpace = function () {
    searchQuery.value = searchQuery.value.trimStart();
};
</script>
