import { useDebugTimeMachine } from 'debug-time-machine-react-client';

function App() {
  const { isConnected, clientId } = useDebugTimeMachine();
  
  return (
    <div>
      {isConnected ? (
        <p>✅ Time Machine connected! Client ID: {clientId}</p>
      ) : (
        <p>🔄 Connecting to Time Machine...</p>
      )}
      
      <YourAppContent />
    </div>
  );
}

import { useDebugTimeMachine } from 'debug-time-machine-react-client';

function App() {
  const timeMachine = useDebugTimeMachine({
    websocketUrl: 'ws://localhost:3001/ws',
    debugMode: true,
    captureUserActions: true,
    captureErrors: true,
    captureStateChanges: true,
    maxReconnectAttempts: 5,
    reconnectInterval: 3000,
    developmentOnly: true,
  });
  
  // 수동으로 상태 변경 캡처
  const handleStateChange = () => {
    timeMachine.captureStateChange(
      'MyComponent',
      { count: 0 },
      { count: 1 },
      { userId: 123 }
    );
  };
  
  // 수동으로 에러 캡처
  const handleError = () => {
    try {
      throw new Error('Something went wrong!');
    } catch (error) {
      timeMachine.captureError(error, { context: 'user action' });
    }
  };
  
  return (
    <div>
      <h1>Debug Time Machine Demo</h1>
      
      <div>
        <p>연결 상태: {timeMachine.isConnected ? '✅ 연결됨' : '❌ 연결 안됨'}</p>
        <p>클라이언트 ID: {timeMachine.clientId || 'N/A'}</p>
        <p>재연결 시도: {timeMachine.connectionInfo.reconnectAttempts}</p>
        {timeMachine.connectionInfo.lastError && (
          <p>마지막 에러: {timeMachine.connectionInfo.lastError}</p>
        )}
      </div>
      
      <div>
        <button onClick={handleStateChange}>상태 변경 캡처</button>
        <button onClick={handleError}>에러 캡처</button>
        <button onClick={timeMachine.reconnect}>수동 재연결</button>
      </div>
    </div>
  );
}