import { Story, Canvas, ArgsTable, Meta } from '@storybook/addon-docs/blocks'
import CarouselSlideImage from '../CarouselSlideImage';
import { imageSlideMockData } from '../../../../mocks/home/carousel';
import { getKnobs } from '../../../tools/knobsHelper';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';

export const knobs = () => Object.assign(
    getKnobs(CarouselSlideImage.schema().form),
    {
        image: {
            url: 'http://placeimg.com/800/480/tech'
        }
    }
)

export const carouselSlideImageSettings = {
    title: 'The title to display.',
    blurb: 'The subtile to display.',
    textColor: 'The subtitle color.',
    textSize: 'The subtitle font size [small, medium, large].',
    imageUrl: 'N/A',
    imageSizing: 'The image size [fill, fit].',
    url: 'N/A',
    backgroundColor: 'The background color.'
}

<Meta title="Atoms/Carousel Slide/Image" component={CarouselSlideImage} />

# CarouselSlideImage
<br />

## `CarouselSlideImages` can be used to display an image slide while also providing various props for customization.
<br />

### Default
<Canvas>
    <Story name="Default">
        <div style={{ height: '440px' }}>
            <CarouselSlideImage data={imageSlideMockData.slideData} />
        </div>
    </Story>
</Canvas>

### With settings
<Canvas>
    <Story name="With settings">
        <div style={{ height: '440px' }}>
            <CarouselSlideImage data={knobs()} />
        </div>
    </Story>
</Canvas>

## Usage Example
<CollapsibleJsonSnippet
    summary="dataObj"
    code={imageSlideMockData.slideData}
/>

```jsx
import CarouselSlideImage from '@appdirect/sfb-theme-components/src/atoms/carousel-slide-image/CarouselSlideImage'

<CarouselSlideImage data={dataObj} />
```
## Props
<ArgsTable of={CarouselSlideImage} />

## Schema
### Form Settings
<table>
    <TableContentFromObject obj={carouselSlideImageSettings} />
</table>

### Form Output
<FormOutput code={CarouselSlideImage.schema().form} />
