import { useGetGameClassesByClassGroup } from "@/hooks/GameClassHooks";
import DangerMessage from "../message/DangerMessage";


export default function GameClassByClassGroupDisplay({
	classGroupId
}:{
	classGroupId: string;
}){
	const gameClassesQuery = useGetGameClassesByClassGroup(classGroupId);
	const displayId = crypto.randomUUID().replaceAll("-", "");


	if(gameClassesQuery.status === "pending"){
		return (<div>Loading...</div>);
	}
	else if(gameClassesQuery.status === "error"){
		return (<DangerMessage>Error: {gameClassesQuery.error.message}</DangerMessage>);
	}
	else{
		return (
			<div
				className="flex flex-row flex-wrap items-center justify-center gap-x-4"
			>
				{
					gameClassesQuery.data.map((gameClass) => (
						<div
							key={`gameClassByClassGroupDisplay${classGroupId}${gameClass.gameClassId}${displayId}`}
							className="flex flex-row items-center justify-center"
						>
							{
								gameClass.gameClassIcon &&
								<img
									className="max-h-6 max-w-6 mr-2"
									src={`${import.meta.env.VITE_ICON_URL}/gameClass/${gameClass.gameClassIcon}`}
								/>
							}
							{gameClass.gameClassName}
						</div>
					))
				}
			</div>
		);
	}
}