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

describe('KpiCard', () => {
  it('renders label and value', () => {
    render(<KpiCard label="Revenue" value="$2,840" />);

    expect(screen.getByText('Revenue')).toBeInTheDocument();
    expect(screen.getByText('$2,840')).toBeInTheDocument();
  });

  it('renders positive delta in forest color with up arrow', () => {
    render(<KpiCard label="Orders" value="43" delta={{ direction: 'up', text: '+8 vs last month' }} />);

    const delta = screen.getByText(/\+8 vs last month/);
    expect(delta).toBeInTheDocument();
    expect(delta).toHaveClass('text-forest');
  });

  it('renders negative delta in terracotta color with down arrow', () => {
    render(<KpiCard label="Orders" value="35" delta={{ direction: 'down', text: '-3 vs last month' }} />);

    const delta = screen.getByText(/-3 vs last month/);
    expect(delta).toHaveClass('text-terracotta');
  });

  it('renders no delta block when delta is omitted', () => {
    const { container } = render(<KpiCard label="Next payout" value="$1,205" />);

    expect(container.querySelector('[data-testid="kpi-delta"]')).toBeNull();
  });
});