import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import DomainApp from '../DomainApp';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { domainAppMockCheckoutV2, domainAppMockCheckoutV1, fetchSuggestionsMock } from '../../../../mocks/product/domainApp';


<Meta title="Components/Domain App" component={DomainApp} />

# DomainApp
<br />

## `DomainApps` are used to search, select and buy domains.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div style={{ width: '100%' }}>
            <DomainApp
                data={domainAppMockCheckoutV2}
                fetchSuggestions={fetchSuggestionsMock}
            />
        </div>
    </Story>
</Canvas>

### Checkout version 1
<Canvas>
    <Story name="Checkout version 1">
        <div style={{ width: '100%' }}>
            <DomainApp
                data={domainAppMockCheckoutV1}
                fetchSuggestions={fetchSuggestionsMock}
            />
        </div>
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="domainAppData"
    code={domainAppMockCheckoutV2}
/>

```jsx
import DomainApp from '@appdirect/sfb-theme-components/src/components/domain-app/DomainApp';

<DomainApp
    data={domainAppData}
/>

```

## Props
<ArgsTable of={DomainApp} />
