veza/apps/web/src/components/ui/OptimizedImage.stories.tsx

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

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

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', // High res image
        alt: 'Loading Image',
        width: 600,
        height: 400,
        className: 'rounded-lg object-cover',
        placeholder: <span className="text-white">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',
    },
};