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

describe('StatCard', () => {
  it('renders label', () => {
    render(<StatCard label="Giá TB/m²" value="25" />);
    expect(screen.getByText('Giá TB/m²')).toBeInTheDocument();
  });

  it('renders string value', () => {
    render(<StatCard label="Label" value="25 tr/m²" />);
    expect(screen.getByText('25 tr/m²')).toBeInTheDocument();
  });

  it('renders number value', () => {
    render(<StatCard label="Label" value={1234} />);
    expect(screen.getByText('1234')).toBeInTheDocument();
  });

  it('renders unit when provided', () => {
    render(<StatCard label="Label" value="25" unit="tr/m²" />);
    expect(screen.getByText('tr/m²')).toBeInTheDocument();
  });

  it('renders PriceDelta when delta provided', () => {
    const { container } = render(<StatCard label="Label" value="25" delta={3.5} />);
    expect(container.querySelector('[data-numeric]')).toBeInTheDocument();
  });

  it('does not render delta section when delta is undefined', () => {
    render(<StatCard label="Label" value="25" />);
    // no PriceDelta text like +x%
    expect(screen.queryByText(/\+\d/)).toBeNull();
  });

  it('renders sublabel', () => {
    render(<StatCard label="Label" value="25" sublabel="7 ngày" />);
    expect(screen.getByText('7 ngày')).toBeInTheDocument();
  });

  it('renders icon node', () => {
    render(
      <StatCard label="Label" value="25" icon={<span data-testid="icon" />} />,
    );
    expect(screen.getByTestId('icon')).toBeInTheDocument();
  });

  it('merges custom className', () => {
    render(<StatCard data-testid="sc" label="L" value="V" className="extra" />);
    expect(screen.getByTestId('sc')).toHaveClass('extra');
  });
});