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

export const videoSlideMockData = carouselMockData.slides[0];
export const dataObj = Object.assign(
    videoSlideMockData.slideData,
    {
        videoUrl: 'https://www.youtube.com/watch?v=oHg5SJYRHA0',
        imageUrl: 'http://placeimg.com/800/480/tech'
    }
)

export const carouselSlideVideoSettings = {
    title: 'The title to display.',
    blurb: 'The subtitle to display.',
    textColor: 'The play button color.',
    imageUrl: 'N/A',
    videoUrl: 'N/A',
    backgroundColor: 'The background color.'
}

<Meta of={CarouselSlideVideoStories} />

# CarouselSlideVideo

<br />

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

<br />

### Default

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

## Usage Example

<CollapsibleJsonSnippet summary="dataObj" code={dataObj} />

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

<CarouselSlideText data={dataObj} settings={{ height: 440 }} />
```

## Props

<ArgsTable of={CarouselSlideVideo} />

## Schema

### Form Settings

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

### Form Output

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