Flesh out payment stuff

components/GameConfigPanel.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Shuffle, Eye, Flame, TrendingUp, MinusCircle, Award, Info, ChevronDown, ChevronUp, Dices } from 'lucide-react';
+import { Shuffle, Eye, Flame, TrendingUp, MinusCircle, Award, Info, ChevronDown, ChevronUp, Dices, Users } from 'lucide-react';
 import type { GameConfig } from '../types';
 
 interface GameConfigPanelProps {
@@ -7,6 +7,7 @@ interface GameConfigPanelProps {
   onChange: (config: GameConfig) => void;
   questionCount: number;
   compact?: boolean;
+  maxPlayersLimit?: number;
 }
 
 interface TooltipProps {
@@ -128,6 +129,42 @@ const ToggleRow: React.FC<ToggleRowProps> = ({
   );
 };
 
+interface ValueRowProps {
+  icon: React.ReactNode;
+  label: string;
+  description: string;
+  tooltip?: string;
+  children: React.ReactNode;
+}
+
+const ValueRow: React.FC<ValueRowProps> = ({
+  icon,
+  label: labelText,
+  description,
+  tooltip,
+  children,
+}) => {
+  return (
+    <div className="bg-white rounded-xl border-2 border-gray-200 overflow-hidden">
+      <div className="flex items-center justify-between p-4 hover:bg-gray-50 transition group">
+        <div className="flex items-center gap-3 flex-1">
+          <div className="p-2 rounded-lg bg-theme-primary text-white transition">
+            {icon}
+          </div>
+          <div>
+            <p className="font-bold text-gray-900">{labelText}</p>
+            <p className="text-sm text-gray-500">{description}</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-2">
+          {tooltip && <Tooltip content={tooltip} />}
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
 interface NumberInputProps {
   label: string;
   value: number;
@@ -161,9 +198,17 @@ export const GameConfigPanel: React.FC<GameConfigPanelProps> = ({
   onChange,
   questionCount,
   compact = false,
+  maxPlayersLimit = 150,
 }) => {
   const [expanded, setExpanded] = useState(!compact);
 
+  // Clamp maxPlayers if it exceeds the limit
+  React.useEffect(() => {
+    if (config.maxPlayers && config.maxPlayers > maxPlayersLimit) {
+      onChange({ ...config, maxPlayers: maxPlayersLimit });
+    }
+  }, [maxPlayersLimit, config.maxPlayers, onChange]);
+
   const update = (partial: Partial<GameConfig>) => {
     onChange({ ...config, ...partial });
   };
@@ -195,6 +240,29 @@ export const GameConfigPanel: React.FC<GameConfigPanelProps> = ({
         </button>
       )}
 
+      <ValueRow
+        icon={<Users size={20} />}
+        label="Max Players"
+        description="Limit the number of players who can join"
+        tooltip="The maximum number of players allowed in the game (2-150). Subscription required for >10 players."
+      >
+        <div className="flex flex-col items-end">
+          <NumberInput
+            label=""
+            value={config.maxPlayers || 10}
+            onChange={(v) => update({ maxPlayers: Math.min(v, maxPlayersLimit) })}
+            min={2}
+            max={maxPlayersLimit}
+            suffix="players"
+          />
+          {maxPlayersLimit < 150 && (
+            <span className="text-xs text-amber-600 font-bold">
+              Free plan max: {maxPlayersLimit} players
+            </span>
+          )}
+        </div>
+      </ValueRow>
+
       <ToggleRow
         icon={<Shuffle size={20} />}
         iconActive={config.shuffleQuestions}