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

describe('StatBand', () => {
  it('renders each stat value and label', () => {
    render(
      <StatBand
        stats={[
          { value: '$5.5T', label: 'Market opportunity' },
          { value: '3x', label: 'Faster time to value' },
        ]}
      />
    );

    expect(screen.getByText('$5.5T')).toBeInTheDocument();
    expect(screen.getByText('Market opportunity')).toBeInTheDocument();
    expect(screen.getByText('3x')).toBeInTheDocument();
    expect(screen.getByText('Faster time to value')).toBeInTheDocument();
  });

  it('defaults columns to the number of stats, capped at 4', () => {
    const { container, rerender } = render(
      <StatBand stats={[{ value: '1', label: 'One' }, { value: '2', label: 'Two' }]} />
    );
    expect(container.firstChild).toHaveClass('md:grid-cols-2');

    rerender(
      <StatBand
        stats={[
          { value: '1', label: 'One' },
          { value: '2', label: 'Two' },
          { value: '3', label: 'Three' },
          { value: '4', label: 'Four' },
          { value: '5', label: 'Five' },
        ]}
      />
    );
    expect(container.firstChild).toHaveClass('md:grid-cols-4');
  });

  it('honors an explicit columns prop over the default', () => {
    const { container } = render(
      <StatBand
        columns={3}
        stats={[
          { value: '1', label: 'One' },
          { value: '2', label: 'Two' },
        ]}
      />
    );

    expect(container.firstChild).toHaveClass('md:grid-cols-3');
  });

  it('applies the color token to each stat value', () => {
    render(
      <StatBand
        stats={[
          { value: '99%', label: 'Uptime', color: 'success' },
          { value: '9M+', label: 'Requests/day' },
        ]}
      />
    );

    expect(screen.getByText('99%')).toHaveClass('text-success');
    expect(screen.getByText('9M+')).toHaveClass('text-primary');
  });

  it('adds a left border to stats that are not first in their row', () => {
    render(
      <StatBand
        columns={2}
        stats={[
          { value: '1', label: 'First' },
          { value: '2', label: 'Second' },
        ]}
      />
    );

    const firstStatValue = screen.getByText('1');
    const secondStatValue = screen.getByText('2');
    expect(firstStatValue.parentElement).not.toHaveClass('md:border-l');
    expect(secondStatValue.parentElement).toHaveClass('md:border-l');
  });
});