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

describe('Stepper', () => {
  it('renders correctly with multiple steps', () => {
    render(
      <Stepper currentStep={1}>
        <Step step={1} label="Step 1" />
        <Step step={2} label="Step 2" />
        <Step step={3} label="Step 3" />
      </Stepper>
    );

    expect(screen.getByText('Step 1')).toBeInTheDocument();
    expect(screen.getByText('Step 2')).toBeInTheDocument();
    expect(screen.getByText('Step 3')).toBeInTheDocument();
  });

  it('shows checkmark for completed steps', () => {
    const { container } = render(
      <Stepper currentStep={2}>
        <Step step={1} label="Step 1" />
        <Step step={2} label="Step 2" />
      </Stepper>
    );

    // Step 1 is completed. It should have a check icon.
    // Lucide icons render as svg
    const svgs = container.querySelectorAll('svg');
    expect(svgs.length).toBeGreaterThan(0);
  });

  it('highlights current step', () => {
    render(
      <Stepper currentStep={2}>
        <Step step={1} label="Step 1" />
        <Step step={2} label="Step 2" />
      </Stepper>
    );

    const step2 = screen.getByText('Step 2').parentElement;
    // Step 2 is active, so its label container should have specific class or color
    expect(screen.getByText('Step 2')).not.toHaveClass('text-muted-foreground');
  });
});