import React from "react";
import { IInventoryItem, IStoreItem } from "typings";
import StoreItem from "./StoreItem";

const StoreItemView = (props: {
  inventoryItems: IInventoryItem[] | null | undefined;
  storeItems: IStoreItem[];
  buyStoreItem: (itemId: string) => 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">
        <h2 className="text-3xl font-bold mb-4 text-white">Store</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
          {props.storeItems &&
            props.storeItems.length > 0 &&
            props.storeItems
              .filter((item) => !item.isOwned)
              .map((storeItem, id) => (
                <StoreItem
                  key={id}
                  storeItem={storeItem}
                  buyStoreItem={props.buyStoreItem}
                />
              ))}
        </div>
      </div>
    </div>
  );
};

export default StoreItemView;