import { ButtonProps } from "@/components/button/Button";
import { Game } from "@/interface/Game";
import { useState } from "react";
import GameAdminButtons from "./GameAdminButtons";
import DeleteGameModal from "./modals/DeleteGameModal";
import GameModal from "./modals/GameModal";


export default function GameHeader({
	game
}:{
	game: Game;
}){
	const [ displayEditGameModal, setDisplayEditGameModal ] = useState(false);
	const [ displayDeleteGameModal, setDisplayDeleteGameModal ] = useState(false);

	const buttonProps: ButtonProps = {
		variant: "ghost",
		size: "md",
		shape: "square"
	};


	return (
		<h1
			className="flex flex-col items-center justify-center"
		>
			<div
				className="flex flex-row items-center justify-center text-4xl"
			>
				{
					game.gameIcon &&
					<img
						className="m-auto mr-4"
						src={`${import.meta.env.VITE_ICON_URL}/gameIcons/${game.gameIcon}`}
						height={72}
						width={72}
					/>
				}
				{game.gameName}
			</div>
			<div>
				<GameAdminButtons
					buttonProps={buttonProps}
					showEditGameModal={() => setDisplayEditGameModal(true)}
					showDeleteGameModal={() => setDisplayDeleteGameModal(true)}
				/>
			</div>
			<GameModal
				display={displayEditGameModal}
				close={() => setDisplayEditGameModal(false)}
				game={game}
			/>
			<DeleteGameModal
				display={displayDeleteGameModal}
				close={() => setDisplayDeleteGameModal(false)}
				game={game}
			/>
		</h1>
	);
}