import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import HeaderCartOverlay from '../HeaderCartOverlay';
import { cartMock, cartEmptyMock } from '../../../../../../../mocks/cart';
import * as HeaderCartOverlayStories from './HeaderCartOverlay.stories';

export const parentProps = {
    style: {
        maxWidth: 420
    }
};

<Meta of={HeaderCartOverlayStories} />

# HeaderCartOverlay

<br />

## `HeaderCartOverlays` are used as overview of the product added to cart.

<br />

### Default

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

### Empty

<Canvas>
  <Story of={HeaderCartOverlayStories.Empty} />
</Canvas>

### User not connected

<Canvas>
  <Story of={HeaderCartOverlayStories.UserNotConnected} />
</Canvas>

### Loading

<Canvas>
  <Story of={HeaderCartOverlayStories.Loading} />
</Canvas>

### New Product Added

<Canvas>
  <Story of={HeaderCartOverlayStories.NewProductAdded} />
</Canvas>

### Add to Cart Error

<Canvas>
  <Story of={HeaderCartOverlayStories.AddToCartError} />
</Canvas>

### Already in Cart Message

<Canvas>
  <Story of={HeaderCartOverlayStories.AlreadyInCartMessage} />
</Canvas>

## Usage Example

```jsx
import HeaderCartOverlay from
    '@appdirect/sfb-theme-components/src/components/header/atoms/common/header-cart-overlay/HeaderCartOverlay';

<HeaderCartOverlay />
```

## Props

<ArgsTable of={HeaderCartOverlay} />
