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

import { SECTIONS } from '../../../_utils/taxonomy'
import { Avatar } from '../../../avatar'
import { InstantApprovalIllustration } from '../../../illustration/instantApproval'
import { ItemRadio } from '../../../itemRadio'
import { ItemRadioGroup } from '../../../itemRadioGroup'
import { TheVoice } from '../../../theVoice'
import { IllustratedSection } from './index'

<Meta title={`${SECTIONS}/IllustratedSection`} />

# **IllustratedSection**

<Canvas>
  <Story name="With image">
    <IllustratedSection illustration={<img src="https://cdn.blablacar.com/kairos/assets/build/images/max_2_in_the_back-d1b1da56d9d48d78e0365ff586c68f92.svg" alt="using img element" />}>
      <TheVoice>Keep the middle seat empty so that your passengers are comfortable</TheVoice>
      <ItemRadioGroup name="2mitb" withSeparators withChevrons>
        <ItemRadio name="2mitb" value="true" labelTitle="Yes, sure!" highlighted />
        <ItemRadio name="2mitb" value="false" labelTitle="No, I'll squeeze in 3." />
      </ItemRadioGroup>
    </IllustratedSection>
  </Story>
  <Story name="With avatar">
    <IllustratedSection illustration={<Avatar image="https://cdn.blablacar.com/comuto3/images/avatar/pixar/passenger-f-02.svg" isLarge alt="using avatar component" />}>
      <TheVoice>Keep the middle seat empty so that your passengers are comfortable</TheVoice>
      <ItemRadioGroup name="2mitb" withSeparators withChevrons>
        <ItemRadio name="2mitb" value="true" labelTitle="Yes, sure!" highlighted />
        <ItemRadio name="2mitb" value="false" labelTitle="No, I'll squeeze in 3." />
      </ItemRadioGroup>
    </IllustratedSection>
  </Story>
  <Story name="With illustration">
    <IllustratedSection illustration={<InstantApprovalIllustration title="using illustration component" />}>
      <TheVoice>Keep the middle seat empty so that your passengers are comfortable</TheVoice>
      <ItemRadioGroup name="2mitb" withSeparators withChevrons>
        <ItemRadio name="2mitb" value="true" labelTitle="Yes, sure!" highlighted />
        <ItemRadio name="2mitb" value="false" labelTitle="No, I'll squeeze in 3." />
      </ItemRadioGroup>
    </IllustratedSection>
  </Story>
</Canvas>

## Specifications

## Usage

```jsx
import { IllustratedSection } from '@blablacar/ui-library/build/layout/section/illustratedSection'

<IllustratedSection illustration={<img src="" />}/>
<IllustratedSection illustration={<Avatar image="" isLarge />}/>
<IllustratedSection illustration={<MaxTwoInTheBackIllustration />}/>
```

<ArgsTable of={IllustratedSection} />