<template>
    <div id="search_bar_container" class="flex w-[280px] h-8 px-4 items-center border-[#64748B] border-[1px] rounded-full 
        justify-between">
        <input id="input_search" class="w-full outline-0" :placeholder="i18next.t('AcctMgmt.Search')"
            v-model="inputQuery" @keypress="handleKeyPressOfSearch"
        />
        <img src="@/assets/icon-search.svg" class="w-[17px] h-[17px] flex cursor-pointer" @click="onSearchClick"
            alt="search"/>
    </div>
</template>

<script>
import { ref, } from 'vue';
import i18next from '@/i18n/i18n.js';
export default {
    setup(props, { emit, }) {
        const inputQuery = ref("");

        const onSearchClick = (event) => {
            event.preventDefault();
            emit('on-search-account-button-click', inputQuery.value);
        };

        const handleKeyPressOfSearch = (event) => {
            if (event.key === 'Enter') {
                emit('on-search-account-button-click', inputQuery.value);
            }
        }

        return {
            inputQuery,
            onSearchClick,
            handleKeyPressOfSearch,
            i18next,
        };
    },
};
</script>