/* @component-map
 * App — Main container, handles view switching between lobby and game
 * Lobby — Room name input and join button
 * GameArea — Game display including status bar, board, and round results
 * @end-component-map */

import { useIdentity } from '@deplixo/sdk';
import { Lobby } from './components/Lobby.jsx';
import { useState } from 'react';
import { GameArea } from './components/GameArea.jsx';

function App() {
  const [roomName, setRoomName] = useState(null);
  const { user, loading } = useIdentity();

  return (
    <div className="container">
      <h1>Tic-Tac-Toe Duel</h1>
      <p className="subtitle">2-player tic-tac-toe — take turns, keep score</p>
      {!roomName ? (
        <Lobby onJoin={setRoomName} />
      ) : (
        <GameArea roomName={roomName} user={user} />
      )}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);