import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import SearchBarV2 from '../SearchBarV2';
import * as SearchBarV2Stories from './SearchBarV2.stories';

export const baseSettings = {
    inputName: 'search',
    searchPlaceholder: 'Search this site',
    searchBackgroundColor: '#ffffff',
    searchCornerRadius: 10,
    onSearch: (formData) => alert(`search for ${formData.search}`)
}

<Meta of={SearchBarV2Stories} />

# SearchBarV2

<br />

## `SearchBarV2` package together an input and button to create custom search bars

<br />

### Default

<Canvas>
  <Story of={SearchBarV2Stories.Default} />
</Canvas>

## Usage Example

```jsx
import SearchBar from '@appdirect/sfb-theme-components/src/atoms/search-bar-v2/SearchBarV2';

<SearchBar settings={{
    inputName: 'search',
    searchPlaceholder: 'Search this site',
    searchBackgroundColor: '#ffffff',
    searchCornerRadius: 10,
    onSearch: (formData) => alert(`search for ${formData.search}`)
}} />
```

## Props

<ArgsTable of={SearchBarV2} />
