import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import {
  Timeline,
  TimelineItem,
  TimelineDot,
  TimelineContent,
  TimelineHeading,
  TimelineTime,
  TimelineDescription,
} from './timeline';
import React from 'react';

describe('Timeline', () => {
  it('renders correctly with multiple items', () => {
    render(
      <Timeline>
        <TimelineItem>
          <TimelineDot />
          <TimelineContent>
            <TimelineHeading>First Event</TimelineHeading>
            <TimelineTime>10:00 AM</TimelineTime>
            <TimelineDescription>Description of first event</TimelineDescription>
          </TimelineContent>
        </TimelineItem>
        <TimelineItem>
          <TimelineDot variant="primary" />
          <TimelineContent>
            <TimelineHeading>Second Event</TimelineHeading>
          </TimelineContent>
        </TimelineItem>
      </Timeline>
    );

    expect(screen.getByText('First Event')).toBeInTheDocument();
    expect(screen.getByText('10:00 AM')).toBeInTheDocument();
    expect(screen.getByText('Description of first event')).toBeInTheDocument();
    expect(screen.getByText('Second Event')).toBeInTheDocument();
  });

  it('renders custom icons in TimelineDot', () => {
    render(
      <Timeline>
        <TimelineItem>
          <TimelineDot icon={<span data-testid="custom-icon">X</span>} />
          <TimelineContent>Content</TimelineContent>
        </TimelineItem>
      </Timeline>
    );

    expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
  });
});