import type { Meta, StoryObj } from '@storybook/react';
import { VirtualizedList } from './virtualized-list';

// Generate 1000 items
interface ListItem {
    id: number;
    text: string;
    description: string;
}

const items: ListItem[] = Array.from({ length: 1000 }, (_, i) => ({
    id: i,
    text: `Item ${i + 1}`,
    description: `This is the description for item ${i + 1}. Scrolling is optimized.`,
}));

const meta = {
    title: 'UI/VirtualizedList',
    component: VirtualizedList,
    tags: ['autodocs'],
    argTypes: {
        itemHeight: { control: 'number' },
        containerHeight: { control: 'number' },
        overscan: { control: 'number' },
    },
} satisfies Meta;

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

export const Default: Story = {
    args: {
        items,
        itemHeight: 70,
        containerHeight: 400,
        className: 'border border-border rounded-md',
        renderItem: (item: unknown) => {
            const typedItem = item as ListItem;
            return (
                <div
                    key={typedItem.id}
                    className="h-[70px] p-4 border-b border-border flex flex-col justify-center hover:bg-white/5 transition-colors"
                >
                    <span className="font-bold text-foreground">{typedItem.text}</span>
                    <span className="text-xs text-muted-foreground">{typedItem.description}</span>
                </div>
            );
        },
    },
};

export const SmallItems: Story = {
    args: {
        items,
        itemHeight: 30,
        containerHeight: 300,
        className: 'border border-border rounded-md',
        renderItem: (item: unknown) => {
            const typedItem = item as ListItem;
            return (
                <div
                    key={typedItem.id}
                    className="h-[30px] px-4 flex items-center border-b border-white/5 hover:bg-white/5 text-sm"
                >
                    {typedItem.text}
                </div>
            );
        },
    },
};