import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ProductPlan from '../ProductPlan';
import { CollapsibleJsonSnippet } from '../../../tools/docTools';
import { productPlanMock, productOnlyPlansMock, productOnlyNotes } from '../../../constants/components/product-plan';
import * as ProductPlanStories from './ProductPlan.stories';

<Meta of={ProductPlanStories} />

# ProductPlan

<br />

## `ProductPlans` display all plans and notes that are included in a product.

<br />

### Default

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

### Only plans

<Canvas>
  <Story of={ProductPlanStories.OnlyPlans} />
</Canvas>

### Only notes

<Canvas>
  <Story of={ProductPlanStories.OnlyNotes} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="productPlanData" code={productPlanMock} />

```jsx
import ProductPlan from '@appdirect/sfb-theme-components/src/components/product-plan/ProductPlan';

<ProductPlan data={productPlanMock} />
```

## Props

<ArgsTable of={ProductPlan} />
