import {View, Text, TextInput, SafeAreaView, Image, TouchableOpacity} from 'react-native'
import React, {useState} from 'react'
import {router, useLocalSearchParams, usePathname} from "expo-router";
import icons from "@/constants/icons";
import {useDebouncedCallback} from "use-debounce";

const Search = () => {
    const path = usePathname();
    const params = useLocalSearchParams<{query?: string}>();
   const [search, setSearch] = useState(params.query);

   // we will optimize search with debounce

    const debounceSearch = useDebouncedCallback(
        (text: string) => router.setParams({ query: text }),
        300 // debounce delay in milliseconds
    );

   const handleSearch = (text: string) => {
       console.log(search)
       setSearch(text);
       debounceSearch(text)
   }
    return (
        <View className={'flex flex-row items-center justify-between w-full px-4 rounded-lg border border-blue-200 mt-5 py-2'}>
            <View className={'flex-1 flex flex-row items-center justify-start z-50'}>
               <Image source={icons.search} className={'size-5'}/>
                <TextInput
                    value={search}
                    onChangeText={handleSearch}
                    placeholder={'Search...'}
                    style={{flex: 1, marginLeft: 10}}
                />
            </View>
            <TouchableOpacity>
                <Image source={icons.filter} className={'size-5'}/>
            </TouchableOpacity>
        </View>
    )
}
export default Search