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;
}) => {
  const availableItems = () => {
    const items = props.storeItems.filter((item) => !item.isOwned);
    if (items.length > 0) {
      items.map((storeItem, id) => (
        <StoreItem
          key={id}
          storeItem={storeItem}
          buyStoreItem={props.buyStoreItem}
        />
      ));
    } else {
      return (
        <p className="text-white text-2xl">No items.. Check back later!</p>
      );
    }
  };

  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">
          {availableItems()}
        </div>
      </div>
    </div>
  );
};

export default StoreItemView;
