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

const items = [
  { title: 'Discovery', description: 'We audit your current workflows and data sources.' },
  { title: 'Design', description: 'We map the target architecture and integration points.' },
  { title: 'Delivery', description: 'We ship, monitor, and iterate with your team.' },
];

describe('EvidenceTimeline', () => {
  it('renders a title and description for each item', () => {
    render(<EvidenceTimeline 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(<EvidenceTimeline 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(<EvidenceTimeline items={[{ title: 'Step', description: 'desc', number: '01' }]} />);

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

  it('renders a custom icon instead of a number when provided', () => {
    render(
      <EvidenceTimeline
        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(<EvidenceTimeline items={items} />);

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

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

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