import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
import { action } from "@storybook/addon-actions";

import { TransformWrapper, TransformComponent } from "../../../components";
import { argsTypes } from "../../types/args.types.ts";
import { normalizeArgs, Controls } from "../../utils";

import exampleImg from "../../assets/small-image.jpg";

export const Template = (args) => (
  <TransformWrapper {...normalizeArgs(args)}>
    {(utils) => (
      <div>
        <Controls {...utils} />
        <TransformComponent>
          <img src={exampleImg} alt="" />
        </TransformComponent>
      </div>
    )}
  </TransformWrapper>
);

<Meta
  title="Examples/Small Image"
  component={TransformWrapper}
  argTypes={argsTypes}
/>

# Small Image

<br />

### Preview:

<Canvas>
  <Story name="Small Image">{(args) => <Template {...args} />}</Story>
</Canvas>

## Component API

<ArgsTable story="Small Image" />
