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

const items = [
  { title: 'Connect', description: 'Link your existing tools and data sources.' },
  { title: 'Configure', description: 'Tailor workflows to match your processes.' },
  { title: 'Launch', description: 'Go live with full visibility and controls.' },
];

describe('HowItWorksSteps', () => {
  it('renders a title and description for each step', () => {
    render(<HowItWorksSteps items={items} />);

    items.forEach(item => {
      expect(screen.getByText(item.title)).toBeInTheDocument();
      expect(screen.getByText(item.description)).toBeInTheDocument();
    });
  });

  it('falls back to the 1-based index when neither number nor icon is provided', () => {
    render(<HowItWorksSteps items={items} />);

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

  it('renders an explicit number when provided instead of the index', () => {
    render(<HowItWorksSteps items={[{ title: 'Step', description: 'desc', number: '01' }]} />);

    expect(screen.getByText('01')).toBeInTheDocument();
  });

  it('renders a custom icon instead of a number when provided', () => {
    render(
      <HowItWorksSteps
        items={[{ title: 'Step', description: 'desc', icon: <svg data-testid="step-icon" /> }]}
      />
    );

    expect(screen.getByTestId('step-icon')).toBeInTheDocument();
    expect(screen.queryByText('1')).not.toBeInTheDocument();
  });

  it('renders as many list items as items provided', () => {
    render(<HowItWorksSteps items={items} />);

    expect(screen.getAllByRole('listitem')).toHaveLength(3);
  });

  it('applies a custom className to the list', () => {
    const { container } = render(<HowItWorksSteps items={items} className="custom-steps" />);

    expect(container.firstChild).toHaveClass('custom-steps');
  });
});