import { render, screen } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import { PriceDelta } from '../price-delta';

describe('PriceDelta', () => {
  it('renders formatted positive value with default unit %', () => {
    render(<PriceDelta value={3.14} />);
    expect(screen.getByText('+3.14%')).toBeInTheDocument();
  });

  it('renders negative value', () => {
    render(<PriceDelta value={-2.5} />);
    expect(screen.getByText('-2.50%')).toBeInTheDocument();
  });

  it('renders zero value as neutral', () => {
    render(<PriceDelta value={0} />);
    // 0 is not > 0 so no "+" prefix
    expect(screen.getByText('0.00%')).toBeInTheDocument();
  });

  it('renders with custom unit', () => {
    render(<PriceDelta value={1.5} unit=" tr" precision={1} />);
    expect(screen.getByText('+1.5 tr')).toBeInTheDocument();
  });

  it('hides icon when hideIcon=true', () => {
    const { container } = render(<PriceDelta value={2} hideIcon />);
    // With hideIcon, the ArrowUp/Down/Minus svg is not rendered
    expect(container.querySelector('svg')).toBeNull();
  });

  it('renders icon svg by default', () => {
    const { container } = render(<PriceDelta value={2} />);
    expect(container.querySelector('svg')).toBeInTheDocument();
  });

  it('has data-numeric attribute on root span', () => {
    render(<PriceDelta data-testid="pd" value={1} />);
    expect(screen.getByTestId('pd')).toHaveAttribute('data-numeric');
  });

  it('has font-mono class', () => {
    render(<PriceDelta data-testid="pd" value={1} />);
    expect(screen.getByTestId('pd')).toHaveClass('font-mono');
  });

  it('merges custom className', () => {
    render(<PriceDelta data-testid="pd" value={1} className="extra" />);
    expect(screen.getByTestId('pd')).toHaveClass('extra');
  });

  it('renders direction override independently of value sign', () => {
    // Positive value with forced down direction still shows the down arrow
    const { container } = render(<PriceDelta value={5} direction="down" />);
    // Should still render an svg (ArrowDown)
    expect(container.querySelector('svg')).toBeInTheDocument();
    // Value text is formatted from the `value` prop
    expect(screen.getByText('+5.00%')).toBeInTheDocument();
  });
});