"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, wellId: number) => void;
}) => {
  return (
    <div className="bg-slate-800 p-4 rounded-lg text-white">
      <h2 className="text-2xl mb-4 font-bold">Your Moons</h2>
      {props.stakingSources &&
        props.stakingSources.map((stakingSource, id) => (
          <StakingSource
            key={id}
            stakingSource={stakingSource}
            inventoryItems={props.inventoryItems}
            claimStake={props.claimStake}
            startStake={props.startStake}
          />
        ))}
    </div>
  );
};

export default StakingSourcesView;
