props passed through components successfully

src/components/Player/Player.tsx

@@ -1,43 +1,36 @@
-import { useContext } from "react";
+import { AppState, PlayerData, ResourceCost, StateProps } from "../../util/types"
 import { v4 } from "uuid";
-import { Context } from "../../context/Context";
-import { GemValue, PlayerData, ResourceCost } from "../../util/types"
 
-interface PlayerProps {
-    data: PlayerData
+interface PlayerProps extends StateProps {
+    player: PlayerData
 }
 
-export default function Player({ data }: PlayerProps) {
-    const AppContext = useContext(Context);
-
-    let state: any;
-    let setState: any;
-
-    // const [state, setState] = useState({
-    //     name: data.name,
-    //     starter: data.starter,
-    //     points: data.points,
-    //     nobles: data.nobles,
-    //     cards: data.cards,
-    //     inventory: data.inventory
-    // })
-
-    // const buyCard = (cardData: CardData) => {
-    //     let newCards = state.cards;
-    //     newCards.push(cardData);
-    //     setState({ ...state, cards: newCards })
-    // }
-
+export default function Player({ player, state, setState }: PlayerProps) {
     const getChips = (resource: string) => {
-        AppContext.gameboard.tradingResources[resource as keyof ResourceCost] -= 1;
-        console.log(AppContext);
+        setState((prev: AppState) => {
+            return {
+                ...prev,
+                gameboard: {
+                    ...prev.gameboard,
+                    tradingResources: {
+                        ...prev.gameboard.tradingResources,
+                        [resource as keyof ResourceCost]: prev.gameboard.tradingResources[resource as keyof ResourceCost] -= 1
+                    }
+                }
+            }
+        })
+        
+        console.log(state);
     }
 
     return (
         <div className="player-ui" key={v4()}>
-            <p>Name: {data.name}</p>
-            <p>Score: {data.points}</p>
-            <p>Is {data.starter || "not"} round starter</p>
+            {/* Static Data */}
+            <p>Name: {player.name}</p>
+            <p>Score: {player.points}</p>
+            <p>Is {player.starter || "not"} round starter</p>
+
+            {/* Dynamic data from state */}
             <button onClick={() => getChips('ruby')}>Get Chips</button>
             <div className="player-cards"></div>
             <div className="player-resources"></div>