import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { StatsCard } from './stats-card';
import React from 'react';

describe('StatsCard', () => {
  it('renders correctly with title and value', () => {
    render(<StatsCard title="Total Users" value="1,234" />);

    expect(screen.getByText('Total Users')).toBeInTheDocument();
    expect(screen.getByText('1,234')).toBeInTheDocument();
  });

  it('renders trend indicator correctly', () => {
    render(
      <StatsCard
        title="Revenue"
        value="$45,231"
        trend={{ value: 20.1, label: 'from last month' }}
      />
    );

    expect(screen.getByText('20.1%')).toBeInTheDocument();
    expect(screen.getByText('from last month')).toBeInTheDocument();
  });

  it('renders icon correctly', () => {
    render(
      <StatsCard title="Active" value="567" icon={<span data-testid="test-icon">Icon</span>} />
    );

    expect(screen.getByTestId('test-icon')).toBeInTheDocument();
  });
});