import { type FC } from "react";
import { UserInput } from "./game/UserInput";
import { BoardDisplay } from "./game/BoardDisplay";
import { ConnectionStatus } from "./game/ConnectionStatus";
import { SessionOverride } from "./game/SessionOverride";
import { useGameChannelContext } from "./contexts/useGameChannelContext";
import { ClusterStatus } from "./clusterStatus/ClusterStatus";

const App: FC<{ playerName: string }> = ({ playerName }) => {
  const { isOverridden } = useGameChannelContext();

  if (isOverridden) {
    return <SessionOverride />;
  }

  return (
    <>
      <UserInput playerName={playerName} />
      <div className="w-screen h-screen bg-navy-900 text-navy-100">
        <div className="flex justify-between px-3">
          <ConnectionStatus />
          <ClusterStatus />
        </div>
        <BoardDisplay playerName={playerName} />
      </div>
    </>
  );
};

export default App;