import React from 'react';
import { Meta, Story } from '@storybook/react';
import { IImageWithTextProps, MoleculeImageWithText } from 'native/molecules/ImageWithText';
import { AtomCaption } from 'native/atoms/Typography/Caption/index';

const meta: Meta = {
  title: 'React Native/molecules/ImageWithText',
  component: MoleculeImageWithText,
  argTypes: {},
  parameters: {
    controls: { expanded: true },
  },
};

export default meta;

const TemplateImageWithText: Story<IImageWithTextProps> = (props) => <MoleculeImageWithText {...props}>
  <AtomCaption
    size='xlarge'
    align='center'
    text='Some Text'
    color={'neutral700'}
    weight='bold'
  />
  <AtomCaption
    size='xlarge'
    align='center'
    text='Some Other Text'
    color={'secondary500'}
    weight='bold'
  />
</MoleculeImageWithText >;

export const ImageWithText = TemplateImageWithText.bind({});

ImageWithText.args = {
  imgSrc: 'https://via.placeholder.com/150',
  imgAlt: 'ImgAlt'
};
