import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import DomainApp, { DomainAppComponent } from '../DomainApp';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { domainAppMockCheckoutV2, domainAppMockCheckoutV2DisabledCta, domainAppMockCheckoutV1 } from '../../../../mocks/product/domainApp';
import { fetchSuggestionsMock } from '../../../../mocks/product/domainSuggestionFetch';
import * as DomainAppStories from './DomainApp.stories';

<Meta of={DomainAppStories} />

# DomainApp

<br />

## `DomainApps` are used to search, select and buy domains.

<br />

### Default

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

### Without Call To Action

<Canvas>
  <Story of={DomainAppStories.WithoutCallToAction} />
</Canvas>

### Checkout version 1

<Canvas>
  <Story of={DomainAppStories.CheckoutVersion1} />
</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} />
