import type { Meta, StoryObj } from 'storybook-react-rsbuild';
import { ScrollArea } from '../components/ui';

const meta = {
  title: 'Layout/ScrollArea',
  component: ScrollArea,
  parameters: {
    docs: {
      description: {
        component:
          'Radix ScrollArea with custom styled scrollbars. Wraps content in a viewport with vertical and horizontal scrollbars.',
      },
    },
  },
  argTypes: {
    children: { control: false },
    className: { control: 'text' },
  },
} satisfies Meta<typeof ScrollArea>;

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

export const Playground: Story = {
  render: () => (
    <ScrollArea style={{ width: 300, height: 200, border: '1px solid var(--neutral-border)' }}>
      <div style={{ padding: 16 }}>
        <h4 className="mta-h4" style={{ marginBottom: 8 }}>Scrollable content</h4>
        {Array.from({ length: 20 }).map((_, i) => (
          <p key={i} className="mta-body" style={{ marginBottom: 12 }}>
            Item {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        ))}
      </div>
    </ScrollArea>
  ),
};

export const Vertical: Story = {
  render: () => (
    <ScrollArea style={{ width: 280, height: 150, border: '1px solid var(--neutral-border)' }}>
      <div style={{ padding: 12 }}>
        {Array.from({ length: 30 }).map((_, i) => (
          <div key={i} style={{ padding: 8, borderBottom: '1px solid var(--neutral-border)' }}>
            Row {i + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  ),
};

export const Horizontal: Story = {
  render: () => (
    <ScrollArea style={{ width: 320, height: 80, border: '1px solid var(--neutral-border)' }}>
      <div style={{ display: 'flex', gap: 8, padding: 12, width: 'fit-content' }}>
        {Array.from({ length: 20 }).map((_, i) => (
          <div
            key={i}
            style={{
              padding: 8,
              minWidth: 100,
              background: 'var(--neutral-surface)',
              borderRadius: 4,
            }}
          >
            Item {i + 1}
          </div>
        ))}
      </div>
    </ScrollArea>
  ),
};
