/**
 * Tests for StatsPanel component
 */
import { render, screen } from '@testing-library/react';
import { StatsPanel } from '../StatsPanel';

describe('StatsPanel', () => {
  const mockStats = [
    { label: 'Users', value: '1,234' },
    { label: 'Revenue', value: '$50,000' },
    { label: 'Growth', value: '25%' },
  ];

  it('renders heading when provided', () => {
    render(<StatsPanel heading="Statistics" stats={mockStats} />);
    expect(screen.getByText('Statistics')).toBeInTheDocument();
  });

  it('renders all stats', () => {
    render(<StatsPanel stats={mockStats} />);
    expect(screen.getByText('Users')).toBeInTheDocument();
    expect(screen.getByText('1,234')).toBeInTheDocument();
    expect(screen.getByText('Revenue')).toBeInTheDocument();
    expect(screen.getByText('$50,000')).toBeInTheDocument();
  });

  it('handles numeric values', () => {
    const numericStats = [
      { label: 'Count', value: 1234 },
      { label: 'Percentage', value: 95 },
    ];
    render(<StatsPanel stats={numericStats} />);
    expect(screen.getByText('1234')).toBeInTheDocument();
    expect(screen.getByText('95')).toBeInTheDocument();
  });

  it('handles empty stats array', () => {
    render(<StatsPanel stats={[]} />);
    expect(screen.queryByText('Users')).not.toBeInTheDocument();
  });

  it('renders stat descriptions when provided', () => {
    const statsWithDescriptions = [
      { label: 'Users', value: '1,234', description: 'Active users' },
    ];
    render(<StatsPanel stats={statsWithDescriptions} />);
    expect(screen.getByText('Active users')).toBeInTheDocument();
  });
});

