import React from "react";
import { IInventoryItem, IStakingSource, IStake } from "typings";
import InventoryItem from "./InventoryItem";

const InventoryItemView = (props: {
  stakes: IStake[] | null;
  inventoryItems: IInventoryItem[] | null | undefined;
  upgradeInventoryItem: (inventoryItemId: number, storeItemId: string) => void;
}) => {
  return (
    <div className="bg-slate-800 text-white p-4 rounded-lg">
      <h2 className="text-2xl font-bold mb-4">Your Inventory</h2>
      {props.inventoryItems &&
        props.inventoryItems.map((inventoryItem, id) => (
          <InventoryItem
            key={id}
            inventoryItem={inventoryItem}
            upgradeInventoryItem={props.upgradeInventoryItem}
            stakes={props.stakes}
          />
        ))}
    </div>
  );
};

export default InventoryItemView;
