import {fn} from 'storybook/test'

import {ImageContentWrapper} from '../components/content/image-content-wrapper'
import {injectMocks} from '../mocks'

import type {Meta, StoryObj} from '@storybook/react-vite'

const meta = {
  title: 'Atoms/ImageContentWrapper',
  component: ImageContentWrapper,
  parameters: {
    layout: 'padded',
  },
  args: {
    onLoad: fn(),
  },
  argTypes: {
    publicId: {
      control: 'text',
    },
    externalId: {
      control: 'text',
    },
    width: {
      control: 'number',
    },
    height: {
      control: 'number',
    },
    className: {
      control: 'text',
    },
  },
  tags: ['autodocs'],
} satisfies Meta<typeof ImageContentWrapper>

export default meta
type Story = StoryObj<typeof meta>

injectMocks()

export const WithPublicId: Story = {
  args: {
    publicId: 'content-123',
    width: 400,
    height: 300,
  },
}

export const WithExternalId: Story = {
  args: {
    externalId: 'external-123',
    width: 400,
    height: 300,
  },
}

export const WithCustomLoader: Story = {
  args: {
    publicId: 'content-123',
    width: 400,
    height: 300,
    Loader: 'Loading image...',
  },
}
