'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";

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>
        <GameSelect games={props.games} currentGame={currentGame} setCurrentGame={setCurrentGame} />
        <GameGroupSelect game={currentGame} groups={[gameGroups, setGameGroups]} currentGroups={[currentGameGroups, setCurrentGameGroups]} />
      </SSRProvider>
    </>
  )
}