import { Meta, Story, ArgsTable, Canvas } from '@storybook/blocks';
import ImageZoom from '../ImageZoom';
import * as ImageZoomStories from './ImageZoom.stories';

<Meta of={ImageZoomStories} />

# Image

<br />

## `ImageZoom` is a wrapper around the Image atom, that adds a zoom widget to the image on hover, on desktop.

<br />

### Image Zoom

<Canvas>
  <Story of={ImageZoomStories.Default} />
</Canvas>

## Usage Example

```jsx
import ImageZoom from '@appdirect/sfb-theme-components/src/atoms/image-zoom/ImageZoom';

<ImageZoom
    src="https://picsum.photos/id/1011/1200/1500"
/>
```

## Props

<ArgsTable of={ImageZoom} />
