import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { ImageLoader } from './ImageLoader';

const meta: Meta<typeof ImageLoader> = {
  title: 'Other Components/ImageLoader',
  component: ImageLoader,
  decorators: [
    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
    (Story) => (
      <div
        style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100vh',
        }}
      >
        <div>
          <Story />
        </div>
      </div>
    ),
  ],
};
export default meta;

export const Default: StoryObj<typeof ImageLoader> = {
  args: {
    imgSrc: 'https://picsum.photos/300/300',
    height: 300,
    width: 300,
  },
};

export const NonSquareDimensions: StoryObj<typeof ImageLoader> = {
  args: {
    imgSrc: 'https://picsum.photos/300/200',
    height: 300,
    width: 200,
  },
};

export const SmallerImage: StoryObj<typeof ImageLoader> = {
  args: {
    imgSrc: 'https://picsum.photos/200/200',
    height: 300,
    width: 300,
  },
};

export const ImageFetchFailure: StoryObj<typeof ImageLoader> = {
  args: {
    imgSrc: 'failed-url',
    height: 100,
    width: 100,
  },
};

export const FallbackImage: StoryObj<typeof ImageLoader> = {
  args: {
    imgSrc: 'failed-url',
    height: 50,
    width: 50,
    fallbackSrc: '/images/default_image.svg',
  },
};

export const CustomLoader: StoryObj<typeof ImageLoader> = {
  args: {
    imgSrc: 'https://picsum.photos/300/300',
    height: 300,
    width: 300,
    loadingSkeleton: <circle cx="150" cy="150" r="150" />,
    speed: 1,
    backgroundColor: '#333',
    foregroundColor: '#999',
  },
};
