import Teaser from '.';
import { ComponentStory, ComponentMeta } from '@storybook/react';
import Container from '../Container';
import Row from '../Row';

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

const Template: ComponentStory<typeof Teaser> = (props) => {
    return (
        <Container>
            <Row>
                <div className="col-span-12">
                    <Teaser {...props} />
                </div>
            </Row>
        </Container>
    );
};

export const Default = Template.bind({});
Default.args = {
    as: 'div',
    title: 'Dolore cillum eu fugiat est fugiatore',
    image: <img className="w-full" src="https://picsum.photos/600/400" />,
    description:
        'Lorem ipsum dolor sit amet, consectetur adiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam.',
    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>
    )
};
