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

import { MAIN } from '../_utils/taxonomy'
import { Profile } from './index'

<Meta title={`${MAIN}/Profile`} />

# **Profile**

## Default

<Canvas>
  <Story name="Default">
    <Profile
      mainTitle="Pepe le Pew (small size)"
      aria-label="Driver: Pepe le Pew, Charism +10"
      info="Charism +10 (if no rating)"
      picture="https://pbs.twimg.com/profile_images/749446875162505218/6r6-9wDn.jpg"
    />
  </Story>
</Canvas>

## Size

<Canvas>
  <Story name="Size">
    <Profile
      mainTitle="Pepe le Pew (medium size)"
      aria-label="Driver: Pepe le Pew, Charism +20"
      info="Charism +20 (if no rating)"
      picture="https://pbs.twimg.com/profile_images/749446875162505218/6r6-9wDn.jpg"
      isMedium
    />
  </Story>
</Canvas>

## With ratings

<Canvas>
  <Story name="With  ratings">
    <Profile
      mainTitle="Pepe le Pew (with ratings)"
      aria-label="Driver: Pepe le Pew, Charism +10"
      info="Charism +10 (if no rating)"
      picture="https://pbs.twimg.com/profile_images/749446875162505218/6r6-9wDn.jpg"
      score={2}
      ratings={4}
      ratingsLabel="ratingsLabel"
    />
  </Story>
</Canvas>

## With link

<Canvas>
  <Story name="With link">
    <Profile
      mainTitle="Pepe le Pew (with link)"
      aria-label="Driver: Pepe le Pew, Charism +10"
      info="Charism +10 (if no rating)"
      picture="https://pbs.twimg.com/profile_images/749446875162505218/6r6-9wDn.jpg"
      href="#"
      isLink
    />
  </Story>
</Canvas>

## Specifications

## Usage

```jsx
import { Profile } from '@blablacar/ui-library/build/profile'
<Profile
  mainTitle="Pepe le Pew"
  aria-label="Driver: Pepe le Pew, Charism +10"
  info="Charism +10 (if no rating)"
  picture="https://pbs.twimg.com/profile_images/749446875162505218/6r6-9wDn.jpg"
  alt="Alt text for picture"
  score={2}
  ratings={4}
  ratingsLabel="ratingsLabel"
  href="#"
  isLink
  isMedium
  isIdChecked
/>
```

<ArgsTable of={Profile} />