Revamped weapon display and agent display

app/components/agent.tsx

@@ -1,3 +1,13 @@
-export function Agent({side}: {side: "T" | "CT"}) {
+import { Surface } from "@heroui/react";
-    return <>{side}</>
+
+export function Agent({ agent_id }: { agent_id: string }) {
+    return (
+        <Surface className="bg-[#1f2937] flex justify-center flex-1 min-h-0 p-4">
+            <img
+                src={`/skins/${agent_id}_big.png`}
+                className="pointer-events-none object-contain object-bottom h-full w-full"
+                alt="Agent image"
+            />
+        </Surface>
+    );
 }

app/components/weapon.tsx

@@ -5,8 +5,8 @@ export function Weapon({
     weapon_id,
     color,
     display = "Weapon",
-    float = 0,
+    float,
-    pattern = 0,
+    pattern,
     paint_index = 0,
 }: {
     weapon_id: string;
@@ -27,21 +27,24 @@ export function Weapon({
                     }}
                 >
                     <img
-                        src={`/skins/${weapon_id}_${paint_index}.png`}
+                        src={`/skins/${weapon_id}_${paint_index || 0}.png`}
                         className="pointer-events-none object-contain object-bottom h-full"
+                        alt="Weapon image"
                     />
                 </div>
                 <div
                     className={`h-1 w-full`}
                     style={{ background: `${color}` }}
                 ></div>
-                <Typography.Heading level={6} className="px-2 text-wrap">
+                <Typography.Heading level={6} className="px-2 py-1 text-wrap">
                     {display}
                 </Typography.Heading>
-                <Float float={float} />
+                {float !== undefined && <Float float={float} />}
+                {pattern !== undefined && (
                     <Typography.Paragraph className="px-2">
                         Pattern: {pattern}
                     </Typography.Paragraph>
+                )}
             </div>
         </Button>
     );