/**
 * GameHUD component - sticky heads-up display for game statistics and actions.
 * 
 * Displays Target and Time in cards on the left, with Give Up and New Game buttons on the right.
 */

function GameHUD({ targetPage, startTime, isActive, onGiveUp, onNewGame, gameLoading }) {
  const { formattedTime } = useTimer(startTime, isActive);

  return React.createElement(
    'div',
    { className: 'hud' },
    React.createElement(
      'div',
      { className: 'hud-section' },
      React.createElement(
        'div',
        { className: 'hud-card' },
        React.createElement('div', { className: 'label' }, 'Target'),
        React.createElement('div', { className: 'value' }, targetPage || 'N/A')
      ),
      React.createElement(
        'div',
        { className: 'hud-card' },
        React.createElement('div', { className: 'label' }, 'Time'),
        React.createElement('div', { className: 'value' }, formattedTime)
      )
    ),
    React.createElement(
      'div',
      { className: 'hud-buttons' },
      React.createElement(
        'button',
        {
          type: 'button',
          className: 'danger',
          onClick: onGiveUp,
          disabled: gameLoading,
        },
        'Give Up'
      ),
      React.createElement(
        'button',
        {
          type: 'button',
          onClick: onNewGame,
          disabled: gameLoading,
        },
        'New Game'
      )
    )
  );
}