import { Meta, Canvas, Props } from '@storybook/addon-docs/blocks';
import StoreIcons from './StoreIcons';
import { StoreIconState } from './types';

export const exampleStoreIcons = [
  {
    type: 'amazon',
    name: 'Amazon UK',
    state: 'active',
  },
  {
    type: 'ebay',
    name: 'Ebay',
    state: 'active',
  },
  {
    type: 'shopify',
    name: 'Shopify',
    state: 'active',
  },
  {
    type: 'woocommerce',
    name: 'WooCommerce',
    state: 'active',
  },
  {
    type: 'etsy',
    name: 'Etsy Store',
    state: 'active',
  },
  {
    type: 'bigcommerce',
    name: 'BigCommerce',
    state: 'active',
  },
  {
    type: 'cdiscount',
    name: 'CDiscount',
    state: 'active',
  },
  {
    type: 'magento',
    name: 'Magento',
    state: 'active',
  },
  {
    type: 'opencart',
    name: 'OpenCart',
    state: 'active',
  },
  {
    type: 'vend',
    name: 'Vend',
    state: 'active',
  },
];

<Meta title="Components/UI/StoreIcons" component={StoreIcons} />

# StoreIcons

<Canvas>
  <div style={{ margin: '10px' }}>
    <StoreIcons
      numberOfShownIcons={3}
      icons={exampleStoreIcons}
    />
  </div>
</Canvas>

## Usage

```jsx
import { VeeqoUI } from '@veeqo/components';
const { StoreIcons } = VeeqoUI;

<StoreIcons
  icons={[
    {
      type: 'amazon',
      name: 'Amazon UK',
      state: 'active',
    },
    {
      type: 'ebay',
      name: 'Ebay',
      state: 'active',
    }
  ]}
/>
```

## Props

<Props of={StoreIcons} />

## Non-interactive

<Canvas>
  <StoreIcons
    disableInteraction
    numberOfShownIcons={3}
    icons={exampleStoreIcons}
  />
</Canvas>