import type { Meta, StoryObj } from '@storybook/react';
import { ScrollArea } from './scroll-area';

const meta = {
    title: 'UI/ScrollArea',
    component: ScrollArea,
    tags: ['autodocs'],
    args: {
        className: 'min-h-50 w-96 rounded-md border p-4',
    }
} satisfies Meta<typeof ScrollArea>;

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

export const Default: Story = {
    render: (args) => (
        <ScrollArea {...args}>
            <h4 className="mb-4 text-sm font-medium leading-none">Tags</h4>
            {Array.from({ length: 50 }).map((_, i, a) => (
                <div key={i}>
                    <div className="text-sm">
                        Tag {a.length - i}
                    </div>
                    {i !== a.length - 1 && <div className="my-2 h-px bg-kodo-steel" />}
                </div>
            ))}
        </ScrollArea>
    ),
};