import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import { addonsMock, addonsWithDiscountsMock } from '../../../../../mocks/product/description/addons';
import { CollapsibleJsonSnippet } from '../../../../tools/docTools';
import { ProductAddonListComponent as ProductAddonList } from '../ProductAddonList';
import * as ProductAddonListStories from './ProductAddonList.stories';

export const addonsData = {
    addonProducts: {
        items: addonsMock,
        i18n: {
            addons: 'Add-ons available',
            selectAddonsTitle: 'Add-ons available for this plan',
            inclusions: 'Included'
        }
    }
};

<Meta of={ProductAddonListStories} />

# ProductAddonList

<br />

## `ProductAddonLists` are used to present the list of available addons for a product.

<br />

### Default

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

### With discount

<Canvas>
  <Story of={ProductAddonListStories.WithDiscount} />
</Canvas>

### Carousel

<Canvas>
  <Story of={ProductAddonListStories.Carousel} />
</Canvas>

### Carousel and selectable

<Canvas>
  <Story of={ProductAddonListStories.Selectable} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="addonsData" code={addonsData} />

```jsx
import ProductAddonList from '@appdirect/sfb-theme-components/src/atoms/product-addons-list/ProductAddonList';

<ProductAddonList data={addonsData} />
```

## Props

<ArgsTable of={ProductAddonList} />
