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

const InventoryItemView = (props: {
  stakes: IStake[] | null;
  inventoryItems: IInventoryItem[] | null | undefined;
  upgradeInventoryItem: (inventoryItemId: string, storeItemId: number) => void;
}) => {
  return (
    <div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl rounded-xl col-span-5">
      <div className="bg-slate-900 text-white p-8 rounded-xl h-full">
        <h2 className="text-3xl font-bold mb-4">Your Inventory</h2>
        <div className="grid grid-cols-1 md: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}
              />
            ))
          ) : (
            <p className="text-white text-2xl">
              Go to the <strong>Store</strong> to buy items
            </p>
          )}
        </div>
      </div>
    </div>
  );
};

export default InventoryItemView;
