import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductAssociatedDomain, { ProductAssociatedDomainComponent } from '../ProductAssociatedDomain';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { productDomainAppMock } from '../../../../mocks/product/productDomainApp';
import { fetchSuggestionsMock, fetchEmptySuggestionsMock, failedFetchSuggestionsMock } from '../../../../mocks/product/domainSuggestionFetch';
import * as ProductAssociatedDomainStories from './ProductAssociatedDomain.stories';

<Meta of={ProductAssociatedDomainStories} />

# ProductAssociatedDomain

<br />

## `Product Associated Domain` are used to search, select and buy domains.

<br />

### Default

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

### Always empty suggestions

<Canvas>
  <Story of={ProductAssociatedDomainStories.EmptySuggestion} />
</Canvas>

### Failing fetch suggestions

<Canvas>
  <Story of={ProductAssociatedDomainStories.FailingFetch} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="domainAppData" code={productDomainAppMock} />

```jsx
import ProductAssociatedDomain from
 '@appdirect/sfb-theme-components/src/components/product-associated-domain/ProductAssociatedDomain';

<ProductAssociatedDomain
    data={domainAppData}
/>

```

## Props

<ArgsTable of={ProductAssociatedDomain} />
