'use client';
import { Game } from "@/types/stellaris";
import { GameSelect } from "./game-select";
import { useState } from 'react';
import { GameGroupSelect } from "./game-group-select";
import { SSRProvider } from "react-bootstrap";
import { GameInfoTabs } from "./game-info-tabs";

export const GameView = (props: { games: Game[] }) => {
  const [currentGame, setCurrentGame] = useState(props.games[0]);

  const [gameGroups, setGameGroups] = useState([{ id: 0, name: "", game_id: 0 }]);
  const [currentGameGroups, setCurrentGameGroups] = useState(gameGroups);

  return (
    <>
      <SSRProvider>
        <div className="row">
          <GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} />
          <GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
        </div>
        <GameInfoTabs game={currentGame} groups={currentGameGroups} />
      </SSRProvider>
    </>
  )
}