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

// Generate 1000 items
const items = 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<typeof VirtualizedList<typeof items[0]>>;

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

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

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