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

import IconButton from '@Holos/Button/Icon.vue'
import GoogleIcon from '@Shared/GoogleIcon.vue';

/** Eventos */
const emit = defineEmits([
    'search'
]);

/** Propiedades */
const props = defineProps({
    title: String,
    placeholder: {
        default: Lang('search'),
        type: String
    }
})

const query = ref('');

/** Métodos */
const search = () => {
    emit('search', query.value);
}

const clear = () => {
    query.value = '';

    search();
}
</script>
<template>
    <div v-if="title" class="flex w-full justify-center">
        <h2
            class="font-bold text-xl uppercase"
            v-text="title"
        />
    </div>
    <div class="flex w-full justify-between items-center py-4 mb-4">
        <div>
            <div class="relative z-0">
                <div  @click="search" class="absolute inset-y-0 right-3 flex items-center gap-1 cursor-pointer">
                    <GoogleIcon
                        :title="$t('search')"
                        class="text-lg text-gray-500 hover:text-gray-700"
                        name="search"
                    />
                    <GoogleIcon
                        v-show="query"
                        :title="$t('clear')"
                        class="text-lg text-gray-500 hover:text-gray-700"
                        name="close"
                        @click="clear"
                    />
                </div>
                <input
                    id="search"
                    class="bg-white border border-gray-300 text-gray-700 text-sm rounded-lg outline-0 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 block sm:w-56 md:w-72 lg:w-96 pr-16 px-4 py-2.5 shadow-sm"
                    autocomplete="off"
                    :placeholder="placeholder"
                    type="text"
                    v-model="query"
                    @keyup.enter="search"
                />
            </div>
        </div>
        <div class="flex items-center gap-2" id="buttons">
            <slot />
        </div>
	</div>
</template>