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

import { StoreName, CustomStoreName, CarrierName, AccountingName } from './types';
import Integration from './Integration';

<Meta title="Components/Common/Integration" component={Integration} />

# Button

TODO: Add intro

<Canvas>
  <Integration name="amazon" />
  <Integration name="shopify" />
  <Integration name="woocommerce" />
</Canvas>

## Contents

* [Usage](#usage)
* [List of available integrations](#list-of-available-integrations)
* [Props](#props)

## Usage

```jsx
import { VeeqoCommon } from '@veeqo/components';
const { Integration } = VeeqoCommon;

<Integration name="shopify" />
```

## List of available integrations

### Stores

<table>
  {Object.keys(StoreName).map(name => (
    <tr>
      <td>{name}</td>
      <td>
        <Integration name={name} />
      </td>
    </tr>
  ))}
</table>

### Custom stores

<table>
  {Object.keys(CustomStoreName).map(name => (
    <tr>
      <td>{name}</td>
      <td>
        <Integration name={name} />
      </td>
    </tr>
  ))}
</table>

### Carriers

<table>
  {Object.keys(CarrierName).map(name => (
    <tr>
      <td>{name}</td>
      <td>
        <Integration name={name} />
      </td>
    </tr>
  ))}
</table>

### Accounting

<table>
  {Object.keys(AccountingName).map(name => (
    <tr>
      <td>{name}</td>
      <td>
        <Integration name={name} />
      </td>
    </tr>
  ))}
</table>

## Props

<Props of={Integration} />