import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import { StepIndicator } from '../StepIndicator';

describe('StepIndicator', () => {
  it('should render 3 step dots', () => {
    const { getAllByText } = render(<StepIndicator currentStep={1} />);
    // Step 1 shows number, steps 2 and 3 show numbers
    expect(getAllByText(/^[1-3]$/)).toHaveLength(3);
  });

  it('should show checkmark for completed steps', () => {
    const { container, getByText, queryByText } = render(
      <StepIndicator currentStep={2} />
    );
    // Step 1 is completed — rendered as CheckmarkSvg, not text
    expect(container.querySelector('svg')).toBeInTheDocument();
    expect(queryByText('1')).not.toBeInTheDocument();
    expect(getByText('2')).toBeInTheDocument();
    expect(getByText('3')).toBeInTheDocument();
  });

  it('should show checkmarks for steps 1 and 2 when on step 3', () => {
    const { container, getByText, queryByText } = render(
      <StepIndicator currentStep={3} />
    );
    // Steps 1 and 2 are completed — each rendered as CheckmarkSvg
    expect(container.querySelectorAll('svg')).toHaveLength(2);
    expect(getByText('3')).toBeInTheDocument();
    expect(queryByText('1')).not.toBeInTheDocument();
    expect(queryByText('2')).not.toBeInTheDocument();
  });

  it('should render step labels', () => {
    const { getByText } = render(<StepIndicator currentStep={1} />);
    expect(getByText('Your details')).toBeInTheDocument();
    expect(getByText('Your trip')).toBeInTheDocument();
    expect(getByText('Budget & extras')).toBeInTheDocument();
  });
});