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

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

export default StoreItemView;