import React, { useState } from 'react';
import { AutocompletePro, AutocompleteOption } from 'react-autocomplete-pro';

const options: AutocompleteOption[] = [
  { id: '1', label: 'iPhone 15 Pro', value: 'iphone-15-pro' },
  { id: '2', label: 'Samsung Galaxy S24', value: 'samsung-s24' },
  { id: '3', label: 'MacBook Pro M3', value: 'macbook-pro-m3' }
];

function App() {
  const [selected, setSelected] = useState<AutocompleteOption | undefined>();

  return (
    <AutocompletePro
      options={options}
      value={selected}
      onChange={setSelected}
      placeholder="Search products..."
    />
  );
}

<AutocompletePro
  options={options}
  value={selectedItems}
  onChange={setSelectedItems}
  multiple={true}
  showCategories={true}
  showTrending={true}
  groupBy={(option) => option.category}
  placeholder="Select multiple products..."
/>

<AutocompletePro
  options={options}
  searchConfig={{
    algorithm: 'fuzzy',
    fuzzyThreshold: 0.5
  }}
  placeholder="Try typos: 'macbok', 'ipone'..."
/>

const handleAsyncSearch = async (query: string): Promise<AutocompleteOption[]> => {
  const response = await fetch(`/api/search?q=${query}`);
  return response.json();
};

<AutocompletePro
  options={[]}
  onSearch={handleAsyncSearch}
  searchConfig={{
    debounceMs: 300,
    minQueryLength: 2
  }}
  placeholder="Type to search..."
/>