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

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

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

export const Default = Template.bind({});
Default.args = {
    heading: { title: 'Dolore cillum eu fugiat est fugiatore' },
    description:
        'Lorem ipsum dolor sit amet, consectetur adiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna ut enim ad minim veniam.',
    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>
    )
};

export const Odd = Template.bind({});
Odd.args = {
    ...Default.args,
    odd: true
};

export const BoldTitle = Template.bind({});
BoldTitle.args = {
    ...Default.args,
    heading: {
        title: undefined,
        titleHtml: '<b>Dolore cillum</b> eu fugiat est fugiatore'
    }
};

// export const Subtitle = Template.bind({});
// Subtitle.args = {
//     ...Default.args,
//     subtitle: 'Amco laboris nisi'
// };
