import { Fragment } from 'react'
import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs/blocks'

import { color } from '_utils/branding'
import { Illustration } from '_utils/illustration'

import { STYLES } from '../_utils/taxonomy'
import * as allIllustrations from './index'

<Meta title={`${STYLES}/Illustrations`} />

# ** Illustrations **

<Canvas>
  <Story name="Illustrations">
    <Fragment>
      {Object.entries(allIllustrations).map(([name, Component]) => (
        <Fragment>
          <h2>{name}</h2>
          <div style={{ display: 'flex', textAlign: 'center' }}>
            <div style={{ width: '50%' }}>
              <Component title={name} />
            </div>
            <div style={{ width: '50%', background: color.green }}>
              <Component title={name} />
            </div>
          </div>
        </Fragment>
      ))}
    </Fragment>
  </Story>
</Canvas>

## Specifications

### Colours

Colours in illustrations are not always the one used in the system. They use brand colours.

### Animation

Some illustrations could be animated.

### Size

Illustrations should have the max possible size (full width) and keep the W:H ratio when scalling WHILE not exceeding 1/3 of the screen height.

## Usage

```js
import { InstantApprovalIllustration } from '@blablacar/ui-library/illustration/instantApproval'

<InstantApprovalIllustration title="Instant Approval" />
```

<ArgsTable of={Illustration} />