import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { ScrollArea } from './scroll-area';

describe('ScrollArea Component', () => {
  it('renders scroll area', () => {
    render(
      <ScrollArea>
        <div>Content</div>
      </ScrollArea>,
    );

    expect(screen.getByText('Content')).toBeInTheDocument();
  });

  it('renders with custom className', () => {
    const { container } = render(
      <ScrollArea className="custom-scroll">
        <div>Content</div>
      </ScrollArea>,
    );

    const scrollArea = container.querySelector('.custom-scroll');
    expect(scrollArea).toBeInTheDocument();
  });

  it('handles long content with scrolling', () => {
    const longContent = Array.from({ length: 100 }, (_, i) => (
      <div key={i}>Item {i}</div>
    ));

    render(<ScrollArea>{longContent}</ScrollArea>);

    expect(screen.getByText('Item 0')).toBeInTheDocument();
    expect(screen.getByText('Item 99')).toBeInTheDocument();
  });

  it('applies custom height', () => {
    const { container } = render(
      <ScrollArea className="h-64">
        <div>Content</div>
      </ScrollArea>,
    );

    const scrollArea = container.querySelector('.h-64');
    expect(scrollArea).toBeInTheDocument();
  });
});