import Teasers, { TeasersProps } 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';

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

const createRandomTeaser = (): TeaserProps => ({
    heading: {
        title: faker.lorem.words(4)
    },
    description: faker.lorem.sentences(3)
});

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

export const Default = Template.bind({});
Default.args = {
    teasers: [createRandomTeaser(), createRandomTeaser(), createRandomTeaser(), createRandomTeaser()],
    heading: {},
    title: 'Amco laboris nisi',
    defaultTeaserProps: {
        image: <img className="w-full" src="https://picsum.photos/600/400" />,
        button: (
            <button
                type="button"
                className="mt-8 inline-flex items-center rounded-md border border-transparent bg-secondary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-secondary-700 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2"
            >
                Button text
            </button>
        )
    }
} as TeasersProps;
