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-slate-800 p-4 rounded-lg">
      <h2 className="text-2xl font-bold mb-4 text-white">Store</h2>
      <div className="grid grid-cols-1 gap-4">
        {props.storeItems &&
          props.storeItems
            .filter((item) => !item.isOwned)
            .map((storeItem, id) => (
              <StoreItem
                key={id}
                storeItem={storeItem}
                buyStoreItem={props.buyStoreItem}
              />
            ))}
      </div>
    </div>
  );
};

export default StoreItemView;
