import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductListingControls from '../ProductListingControls';
import { listingProductsMock } from '../../../../mocks/listingProducts';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as ProductListingControlsStories from './ProductListingControls.stories';
import { getArgs } from '../../../tools/controlsHelper';

<Meta of={ProductListingControlsStories} />

# ProductListingControls

<br />

## `ProductListingControls` control the order and layout of the products in the listing page.

<br />

### Default

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

## Usage Example

<CollapsibleJsonSnippet summary="listingProducts" code={listingProductsMock} />

<br />

<CollapsibleJsonSnippet summary="settingsData" code={getArgs(ProductListingControls.schema().form)} />

```jsx
import ProductListingControls
from '@appdirect/sfb-theme-components/src/components/product-listing-controls/ProductListingControls';

<ProductListingControls data={listingProducts}  settings={settingsData} />

```

## Props

<ArgsTable of={ProductListingControls} />
