import type { Meta, StoryObj } from '@storybook/react';
import {
  OptimizedImage,
  OptimizedImageSkeleton,
} from '@/components/ui/optimized-image';

const meta: Meta = {
  title: 'UI/OptimizedImage',
  component: OptimizedImage,
  tags: ['autodocs'],
  argTypes: {
    width: { control: 'number' },
    height: { control: 'number' },
    priority: { control: 'boolean' },
  },
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Default: Story = {
  args: {
    src: 'https://images.unsplash.com/photo-1707343843437-caacff5cfa74',
    alt: 'Example Image',
    width: 600,
    height: 400,
    className: 'rounded-lg object-cover',
  },
};

export const WithPlaceholder: Story = {
  args: {
    src: 'https://images.unsplash.com/photo-1682687220063-4742bd7fd538',
    alt: 'Loading Image',
    width: 600,
    height: 400,
    className: 'rounded-lg object-cover',
    placeholder: <span className="text-foreground">Loading...</span>,
  },
};

export const ErrorState: Story = {
  args: {
    src: 'https://invalid-url.com/image.jpg',
    alt: 'Broken Image',
    width: 600,
    height: 400,
    className: 'rounded-lg bg-red-100',
  },
};

export const Loading: Story = {
  render: () => (
    <OptimizedImageSkeleton
      width={600}
      height={400}
      className="min-h-layout-story"
    />
  ),
};