"use client";
import React from "react";
import { IInventoryItem, IStakingSource } from "typings";
import StakingSource from "./StakingSource";

const StakingSourcesView = (props: {
  stakingSources: IStakingSource[] | null;
  inventoryItems: IInventoryItem[] | null | undefined;
  claimStake: (stakingEventId: number) => void;
  startStake: (
    inventoryItemId: number,
    storeItemId: string,
    wellId: number
  ) => void;
  createStakingSource: () => void;
}) => {
  return (
    <div className="bg-slate-800 p-4 rounded-lg text-white col-span-5">
      <div className="flex items-center mb-4">
        <h2 className="text-3xl font-bold">Your Moons</h2>
        <button
          className="bg-green-600 rounded-full ml-2 p-1 inline"
          onClick={() => props.createStakingSource()}
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            strokeWidth={2}
            stroke="currentColor"
            className="w-6 h-6"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              d="M12 4.5v15m7.5-7.5h-15"
            />
          </svg>
        </button>
      </div>
      <div className="grid grid-cols-3 gap-4">
        {props.stakingSources &&
          props.stakingSources.length > 0 &&
          props.stakingSources.map((stakingSource, id) => (
            <StakingSource
              key={id}
              stakingSource={stakingSource}
              inventoryItems={props.inventoryItems}
              claimStake={props.claimStake}
              startStake={props.startStake}
            />
          ))}
      </div>
    </div>
  );
};

export default StakingSourcesView;