import ImageTexts, { ImageTextsProps } from '.';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import React from 'react';
import Container from '../Container';
import { TeaserProps } from '../Teaser';
import { faker } from '@faker-js/faker';
import { ImageTextProps } from '../ImageText';

export default {
    title: 'Content/ImageTexts',
    component: ImageTexts
} as ComponentMeta<typeof ImageTexts>;

const createRandomImageText = (): ImageTextProps => ({
    heading: { title: faker.lorem.words(4) },
    description: faker.lorem.sentences(3),
    image: <img src={faker.image.abstract()} />
});

const Template: ComponentStory<typeof ImageTexts> = (props) => {
    return (
        <Container>
            <ImageTexts {...props} />
        </Container>
    );
};

export const Default = Template.bind({});
Default.args = {
    imageTexts: [createRandomImageText(), createRandomImageText(), createRandomImageText(), createRandomImageText()]
} as ImageTextsProps;
