# SearchBar Component

A customizable search bar component with suggestions and async results.

## Props

- `onSubmit` (function): A function that will be called with the search value when the search bar is submitted.
- `asyncResult` (function): A function that will be called with the search value when the search input is changed. It should return a promise that resolves with an array of suggestion objects.
- `onSuggestionClick` (function): A function that will be called with the clicked suggestion.
- `placeholder` (string): The placeholder text for the search input.
- `outlineColor` (string): The color of the search bar outline when it is focused.
- `color` (string): The color of the search input text.
- `borderRadius` (string): The border radius of the search bar.
- `warning` (string): The warning message to display when no results are found.

| Prop Name         | Type     | Default                                       | Description                                                                            |
| ----------------- | -------- | --------------------------------------------- | -------------------------------------------------------------------------------------- |
| onSubmit          | function |                                               | A function that will be called with the search value when the form is submitted        |
| asyncResult       | function |                                               | A function that takes a search value as input and returns an array of suggestion items |
| onSuggestionClick | function |                                               | A function that will be called with the suggestion item when a suggestion is clicked   |
| placeholder       | string   | "Search"                                      | The text to display in the search input when it is empty                               |
| outlineColor      | string   | "#2d9cdb"                                     | The color of the search input outline when it is focused                               |
| color             | string   | "#333"                                        | The color of the search input text                                                     |
| borderRadius      | string   | "4px"                                         | The border radius of the search input                                                  |
| warning           | string   |                                               | The text to display when no results are found                                          |
| width             | number   | Sets width and height of the entire container |

## Example Usage

```jsx
import SearchBar from "./components/SearchBar";

function App() {
  const handleSearch = (searchValue) => {
    //console.log(`Searching for: ${searchValue}`);
  };

  const asyncResult = async (searchValue) => {
    const response = await fetch(
      `https://google.com/search?query=${searchValue}`
    );
    const data = await response.json();
    return data.results;
  };

  const handleSuggestionClick = (suggestion) => {
    //console.log(`Clicked suggestion: ${suggestion}`);
  };

  return (
    <div className="App">
      <SearchBar
        onSubmit={handleSearch}
        asyncResult={asyncResult}
        onSuggestionClick={handleSuggestionClick}
        placeholder="Search for products"
        outlineColor="#febf10"
        heightSize={"20px"}
        widthSize={"120px"}
        color="#333"
        borderRadius="10px"
        warning="No results found"
      />
    </div>
  );
}

export default App;
```
