import { Story, Canvas, ArgsTable, Meta } from '@storybook/blocks'
import CarouselSlideImage from '../CarouselSlideImage';
import { imageSlideMockData } from '../../../../mocks/home/carousel';
import { TableContentFromObject, FormOutput, CollapsibleJsonSnippet } from '../../../tools/docTools';
import * as CarouselSlideImageStories from './CarouselSlideImage.stories';

export const carouselSlideImageSettings = {
    title: 'The title to display.',
    text: 'The text description to display.',
    titleColor: 'The title color.',
    textColor: 'The text description color.',
    textSize: 'The subtitle font size [small, medium, large].',
    imageUrl: 'The image url uploaded.',
    imageSizing: 'The image size [fill, fit].',
    slideLink: 'The slide link.',
    backgroundColor: 'The background color.',
    titleSize: 'The title size [small, medium, large].',
    textAlignment: 'The text alignment.',
    overlayColor: 'The overlay color to apply over the slide.'
}

<Meta of={CarouselSlideImageStories} />

# CarouselSlideImage

<br />

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

<br />

### With Controls

<Canvas>
  <Story of={CarouselSlideImageStories.WithControls} />
</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} />
