import { render, screen, within } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { LeaderboardCard } from '@/components/LeaderboardCard';

const board = { id: 'deaths', title: 'Friedhof', description: 'Häufigste Tode', unit: 'count' as const };
const entries = Array.from({ length: 10 }, (_, i) => ({
  rank: i + 1,
  uuid: `00000000-0000-4000-8000-00000000000${i}`,
  name: `Spieler${i}`,
  value: 100 - i,
}));

describe('LeaderboardCard', () => {
  it('renders 10 rows with names, values and a link to the full board', () => {
    render(<LeaderboardCard board={board} entries={entries} />);
    const rows = screen.getAllByRole('listitem');
    expect(rows).toHaveLength(10);
    expect(within(rows[0]!).getByText('Spieler0')).toBeInTheDocument();
    expect(within(rows[0]!).getByText('100')).toBeInTheDocument();
    expect(screen.getByRole('link', { name: /Friedhof/ })).toHaveAttribute('href', '/leaderboards/deaths');
    expect(rows[0]!.querySelector('a')).toHaveAttribute('href', '/players/Spieler0');
  });

  it('renders an empty state', () => {
    render(<LeaderboardCard board={board} entries={[]} />);
    expect(screen.queryAllByRole('listitem')).toHaveLength(0);
    expect(screen.getByText('Noch keine Daten')).toBeInTheDocument();
  });
});