import { useState, useCallback } from 'react';
import { useSearch } from 'react-native-stackfront-sdk';
import { FlashList } from '@shopify/flash-list';

function SearchScreen() {
  const [query, setQuery] = useState('');
  const { data, loading, search } = useSearch();

  const handleSubmit = useCallback(() => {
    if (query.trim()) {
      search(query.trim(), 20);
    }
  }, [query, search]);

  const results = data?.edges ?? [];

  return (
    <View>
      <SearchBar value={query} onChangeText={setQuery} onSubmit={handleSubmit} />
      <FlashList
        data={results}
        renderItem={({ item }) => <ProductCard product={item.node} />}
        estimatedItemSize={300}
      />
    </View>
  );
}

function useSearch(): {
  data: unknown;                   // search connection shape
  loading: boolean;
  error: Error | null;
  search: (query: string, first?: number) => Promise<void>;
}

import { useDebounce } from '../hooks/useDebounce';

function SearchScreen() {
  const [query, setQuery] = useState('');
  const debouncedQuery = useDebounce(query, 300);
  const { search } = useSearch();

  useEffect(() => {
    if (debouncedQuery.trim()) {
      search(debouncedQuery.trim(), 10);
    }
  }, [debouncedQuery]);

  // ...
}