import React from 'react'
import { render } from '@testing-library/react'
import TimelineEvent from '../TimelineEvent'

describe('TimelineEvent', () => {
  it('renders with date label and children', () => {
    const { container } = render(
      <TimelineEvent
        content={{
          type: 'timeline-event',
          title: 'Significant Event',
        }}
      >
        <p>This is the event content</p>
      </TimelineEvent>
    )
    expect(container).toMatchSnapshot()
  })

  it('renders with minimal children content', () => {
    const { container } = render(
      <TimelineEvent
        content={{
          type: 'timeline-event',
          title: 'Short Event',
        }}
      >
        <p>Brief event description</p>
      </TimelineEvent>
    )
    expect(container).toMatchSnapshot()
  })

  it('renders with long date label', () => {
    const { container } = render(
      <TimelineEvent
        content={{
          type: 'timeline-event',
          title: 'Wednesday, December 25, 2024 - Christmas Day',
        }}
      >
        <p>Christmas celebration details</p>
      </TimelineEvent>
    )
    expect(container).toMatchSnapshot()
  })

  it('renders with complex nested children', () => {
    const { container } = render(
      <TimelineEvent
        content={{
          type: 'timeline-event',
          title: 'Q4 2024',
        }}
      >
        <div>
          <h3>Quarterly Results</h3>
          <p>
            The company announced <strong>strong</strong> Q4 results.
          </p>
        </div>
      </TimelineEvent>
    )
    expect(container).toMatchSnapshot()
  })
})