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="border-2 border-white text-white p-8 rounded-lg col-span-5">
      <h2 className="text-3xl font-bold mb-4">Your Inventory</h2>
      <div className="grid grid-cols-3 gap-8">
        {props.inventoryItems &&
          props.inventoryItems.length > 0 &&
          props.inventoryItems.map((inventoryItem, id) => (
            <InventoryItem
              key={id}
              inventoryItem={inventoryItem}
              upgradeInventoryItem={props.upgradeInventoryItem}
              stakes={props.stakes}
            />
          ))}
      </div>
    </div>
  );
};

export default InventoryItemView;