"use client";
import React from "react";
import { Button } from "@/components/ui/button";
import { useGameStore } from "@/lib/store/game-store";
import { InfoIcon, XIcon } from "lucide-react";
import GameConfigForm from "./game-config-form";
import GameVariantSelector from "./game-variant-selector";

function GameConfigurator() {
  const selectGame = useGameStore((state) => state.setSelectedGame);
  const selectedGame = useGameStore((state) => state.selectedGame);

  return (
    <div className="flex size-full flex-col justify-between p-6">
      <div className="space-y-2">
        <div className="flex items-center">
          <h2 className="text-xl font-semibold">
            {selectedGame?.name ?? "Select a game to get started"}
          </h2>
          {selectedGame && (
            <Button size={"icon"} variant={"ghost"} className="ml-auto">
              <InfoIcon className="size-4" />
            </Button>
          )}
        </div>

        {selectedGame && (
          <>
            <GameVariantSelector />
            <GameConfigForm />
          </>
        )}
      </div>

      {selectedGame && (
        <div className="flex items-center gap-2">
          <Button>Start Game</Button>
          <Button
            variant={"ghost"}
            size={"icon"}
            className="ml-auto"
            onClick={() => selectGame(undefined)}
          >
            <XIcon className="size-4" />
          </Button>
        </div>
      )}
    </div>
  );
}

export default GameConfigurator;
