import { Story, Canvas, Meta, ArgsTable } from '@storybook/blocks';
import ProductPricing from '../ProductPricing';
import { productPricingMock, productPricingNoPlansMock } from '../../../constants/components/product-pricing';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as ProductPricingStories from './ProductPricing.stories';

<Meta of={ProductPricingStories} />

# ProductPricing

<br />

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

<br />

### Default

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

### Without plans

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