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

// Mock the animated counter hook to return the end value immediately
vi.mock('@/hooks/useAnimatedCounter', () => ({
  useAnimatedCounter: ({ end }: { end: number }) => end,
}));

import { AnimatedNumber } from './AnimatedNumber';

describe('AnimatedNumber', () => {
  it('renders the value', () => {
    render(<AnimatedNumber value={42} />);
    expect(screen.getByText('42')).toBeInTheDocument();
  });

  it('applies custom className', () => {
    const { container } = render(
      <AnimatedNumber value={100} className="text-lg" />
    );
    const span = container.querySelector('span');
    expect(span?.className).toContain('text-lg');
    expect(span?.className).toContain('tabular-nums');
  });

  it('uses format function when provided', () => {
    render(
      <AnimatedNumber value={1500} format={(n) => `$${n}`} />
    );
    expect(screen.getByText('$1500')).toBeInTheDocument();
  });

  it('formats large numbers with locale string', () => {
    render(<AnimatedNumber value={1000} />);
    // toLocaleString will format 1000 — the exact output depends on locale
    const span = screen.getByText((content) => content.includes('1'));
    expect(span).toBeInTheDocument();
  });
});