import { action } from 'storybook/actions';
import Image, { type ImageProps } from './Image';

const meta = {
  component: Image,
  title: 'Content/Image',
  argTypes: {
    src: { control: 'text' },
    shrink: { control: 'boolean' },
    stretch: { control: 'boolean' },
    loading: {
      control: 'select',
      options: ['lazy', 'eager'],
    },
  },
};
export default meta;

export const Basic = {
  render: (args: ImageProps) => (
    <>
      <Image id="id1" onLoad={action('load 1')} onError={action('error')} {...args} />
      <Image id="id2" onLoad={action('load 2')} onError={action('error')} {...args} />
      <Image id="id3" onLoad={action('load 3')} onError={action('error')} {...args} />
    </>
  ),
  args: {
    alt: 'test',
    src: 'https://wise.com/web-art/assets/illustrations/bell-medium@2x.webp',
    shrink: true,
    stretch: true,
    loading: 'lazy',
    className: 'm-t-5',
  },
};