import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
import HeaderCartOverlay from '../HeaderCartOverlay';
import { cartMock, cartEmptyMock } from '../../../../../../../mocks/cart';

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

<Meta
    title="Global Components/Header/Atoms/Header Cart Overlay"
    component={HeaderCartOverlay}
/>

# HeaderCartOverlay
<br />

## `HeaderCartOverlays` are used as overview of the product added to cart.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div {...parentProps}>
            <HeaderCartOverlay cart={cartMock} isLoggedIn />
        </div>
    </Story>
</Canvas>

### Empty
<Canvas>
    <Story name="Empty">
        <div {...parentProps}>
            <HeaderCartOverlay cart={cartEmptyMock} isLoggedIn />
        </div>
    </Story>
</Canvas>

### User not connected
<Canvas>
    <Story name="User not connected">
        <div {...parentProps}>
            <HeaderCartOverlay isLoggedIn={false} />
        </div>
    </Story>
</Canvas>

### Loading
<Canvas>
    <Story name="Loading">
        <div {...parentProps}>
            <HeaderCartOverlay isLoading />
        </div>
    </Story>
</Canvas>

### New Product Added
<Canvas>
    <Story name="New Product Added">
        <div {...parentProps}>
            <HeaderCartOverlay cart={cartMock} hasNewProductAdded isLoggedIn />
        </div>
    </Story>
</Canvas>

### Add to Cart Error
<Canvas>
    <Story name="Add to Cart Error">
        <div {...parentProps}>
            <HeaderCartOverlay cart={cartMock} addToCartError isLoggedIn />
        </div>
    </Story>
</Canvas>

### Already in Cart Message
<Canvas>
    <Story name="Already in Cart Message">
        <div {...parentProps}>
            <HeaderCartOverlay cart={cartMock} alreadyInCartNotif isLoggedIn />
        </div>
    </Story>
</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} />
