export default function Client({ data }: { data: any[] }) {;
    let { replace } = useRouter()
    let pathname = usePathname()
    const [text, setText] = useState("")
    const [value] = useDebounce(text, 1000)
    const [isLoading, setLoading] = useState(false)
    const [isMoved, setMoved] = useState(true)
    const [imageLoading, setImageLoading] = useState(true)
    useEffect(() => {
        let params = new URLSearchParams(window.location.search)
        if (value) {
            params.set("query", value)
        } else {
            params.delete("query")
        }
        replace(`${pathname}?${params.toString()}`);
        if (data.length === 0) {
            setMoved(false)
        }
        setLoading(false)
    }, [value])
    return (
            <Input onChange={(e) => (setMoved(true), setLoading(true), setText(e.target.value))}
              placeholder="Start typing"
              className="h-16 text-lg shadow"
              autoFocus
            />
            {isLoading && (
              <div className="absolute right-0 top-0 bottom-0 flex items-center justify-center">
                  <Loader2 className="mr-6 text-black h-4 w-4 animate-spin" />
              </div>
            )}
            {!isMoved && <ol className="mt-10 grid grid-cols-1 gap-4 lg:grid-cols-3 lg:gap-x-8 xl:gap-x-4 xl:-gap-y-8">
          {data.map((product) => (
            ))}
}

    const {data, isLoading, error} = useQuery({
        queryKey: ['search', debouncedSearchTerm],
        queryFn:
        () => {
            if (debouncedSearchTerm) {
                return fetch(`https://g8v07oi41l.execute-api.us-east-1.amazonaws.com/search?q=${search}`)
                .then(res => res.json(), setMoved(false))
            }
            return []
        }
    })

    const {data, isLoading, error} = useQuery({
        queryKey: ['search', debouncedSearchTerm],
        queryFn:
        () => {
            if (debouncedSearchTerm) {
                return fetch(`https://g8v07oi41l.execute-api.us-east-1.amazonaws.com/search?q=${search}`)
                    .then(res => res.json())
            }
            return [];
        }
    })
    return (
        <div className="text-foreground min-h-screen">
            <div className={`${isLoading ? "mt-[17rem]" : ""} transition-all duration-300 mx-auto min-h-[calc(100vh-196px)] w-full max-w-[90rem] flex flex-col items-center px-6 pt-8 pb-16 md:px-20`}>
                <div className="w-full relative max-w-2xl flex">
                    <Input onChange={(e) => setSearch(e.target.value)}