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

export const carouselSlideTextSettings = {
    title: 'The title to display.',
    blurb: 'The subtitle to display.',
    textSize: 'The subtitle font size [small, medium, large].',
    textColor: 'The subtitle color.',
    textAlignment: 'The title & subtitle alignment [left, right].',
    imageUrl: 'N/A',
    imagePosition: 'The alignment of the image [left, right].',
    url: 'The url to redirect to on button click (only visible if "url" is set).',
    buttonLabel: 'The button label (only visible if "url" is set).',
    backgroundColor: 'The background color.'
}

<Meta of={CarouselSlideTextStories} />

# CarouselSlideText

<br />

## `CarouselSlideTexts` can be used to display a text slide while also providing various props for customization.

<br />

### Default

<Canvas>
  <Story of={CarouselSlideTextStories.Default} />
</Canvas>

## Usage Example

<CollapsibleJsonSnippet summary="dataObj" code={textSlideMockData.slideData} />

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

<CarouselSlideText data={dataObj} />
```

## Props

<ArgsTable of={CarouselSlideText} />

## Schema

### Form Settings

<table>
  <TableContentFromObject obj={carouselSlideTextSettings} />
</table>

### Form Output

<FormOutput code={CarouselSlideText.schema().form} />
