import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { TickerStrip, type TickerItem } from '../ticker-strip';

const items: TickerItem[] = [
  { id: 'q1', label: 'Quận 1', changePercent: 2.5 },
  { id: 'q2', label: 'Quận 7', changePercent: -1.2 },
  { id: 'q3', label: 'Thủ Đức', changePercent: 0 },
];

describe('TickerStrip', () => {
  it('renders each item label twice (duplicated for seamless loop)', () => {
    render(<TickerStrip items={items} paused />);
    expect(screen.getAllByText('Quận 1')).toHaveLength(2);
    expect(screen.getAllByText('Quận 7')).toHaveLength(2);
    expect(screen.getAllByText('Thủ Đức')).toHaveLength(2);
  });

  it('applies animate-ticker class when not paused', () => {
    const { container } = render(<TickerStrip items={items} />);
    const inner = container.querySelector('.animate-ticker');
    expect(inner).not.toBeNull();
  });

  it('omits animate-ticker class when paused', () => {
    const { container } = render(<TickerStrip items={items} paused />);
    expect(container.querySelector('.animate-ticker')).toBeNull();
  });

  it('passes through className to root', () => {
    const { container } = render(
      <TickerStrip items={items} paused className="custom-strip" />,
    );
    expect(container.querySelector('.custom-strip')).not.toBeNull();
  });

  it('renders with empty items without crashing', () => {
    const { container } = render(<TickerStrip items={[]} paused />);
    expect(container.querySelector('.overflow-hidden')).not.toBeNull();
  });
});