<script setup>
import { debounce } from 'lodash';
import { ref, watch } from 'vue';
import TextInput from '@/Components/TextInput.vue';
import { router } from '@inertiajs/vue3';

const props = defineProps({
    options: Object
});

const search = ref(props.options.search)

watch(search, debounce((value) => {
    const routeOptions = props.options.route.options ?? null;
    router.get(
        route(props.options.route.link, routeOptions),
        { search: value },
        { preserveState: true, replace: true, preserveScroll: true },
    );
}, 300));

</script>
<template>
    <TextInput v-model="search" title="Search" placeholder="Iskanje..." />
</template>