/**
 * NavigationHistory component displays the navigation history for a game.
 * 
 * Shows all navigation steps in chronological order with source and target pages.
 */

function NavigationHistory({ gameId, onStepClick }) {
  const { history, loading, error } = useNavigation(gameId);

  if (loading) {
    return React.createElement(
      'div',
      { className: 'navigation-history loading' },
      React.createElement('p', null, 'Loading navigation history...')
    );
  }

  if (error) {
    return React.createElement(
      'div',
      { className: 'navigation-history error' },
      React.createElement('p', { className: 'error-message' }, error)
    );
  }

  if (!history || !history.steps || history.steps.length === 0) {
    return React.createElement(
      'div',
      { className: 'navigation-history empty' },
      React.createElement('p', null, 'No navigation history yet. Start clicking links to see your path!')
    );
  }

  return React.createElement(
    'div',
    { className: 'navigation-history' },
    React.createElement(
      'h3',
      { className: 'history-title' },
      'Navigation History'
    ),
    React.createElement(
      'div',
      { className: 'history-steps' },
      history.steps.map((step, index) =>
        React.createElement(
          'div',
          {
            key: step.step_id,
            className: 'history-step',
            onClick: () => onStepClick && onStepClick(step),
          },
          React.createElement(
            'div',
            { className: 'step-number' },
            `${step.step_number}.`
          ),
          React.createElement(
            'div',
            { className: 'step-pages' },
            React.createElement(
              'span',
              { className: 'step-source' },
              step.source_page
            ),
            React.createElement(
              'span',
              { className: 'step-arrow' },
              ' → '
            ),
            React.createElement(
              'span',
              { className: 'step-target' },
              step.target_page
            )
          )
        )
      )
    )
  );
}