import { Story, Canvas, Meta, ArgsTable } from '@storybook/addon-docs/blocks';
import ProductPricing from '../ProductPricing';
import { editionsMockData } from '../../../../mocks/product/productEditions';
import { addonsMock } from '../../../../mocks/product/description/addons';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';

export const productPricingMock = {
    editions: editionsMockData,
    addonProducts: {
        items: addonsMock
    },
    i18n: editionsMockData.i18n
};

export const productPricingNoPlansMock = {
    editions: {
        bullets: [],
        items: editionsMockData.items,
        footnotes: [],
        i18n: editionsMockData.i18n
    },
    addonProducts: {
        items: addonsMock
    },
    i18n: editionsMockData.i18n
}

<Meta title="Components/Product Pricing" component={ProductPricing} />

# ProductPricing
<br />

## `ProductPricing` can be used to showcase a quick view of one or more products.
<br />

### Default
<Canvas>
    <Story name="Default">
        <ProductPricing data={productPricingMock} />
    </Story>
</Canvas>

### Without plans
<Canvas>
    <Story name="Without plans">
        <ProductPricing data={productPricingNoPlansMock} />
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="dataObj"
    code={productPricingMock}
/>

```jsx
import ProductPricing from '@appdirect/sfb-theme-components/src/components/product-pricing/ProductPricing'

<ProductPricing data={dataObj} />

```
## Props
<ArgsTable of={ProductPricing} />
