"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: string,
    storeItemId: number,
    wellId: string
  ) => void;
  createStakingSource: () => void;
}) => {
  return (
    <div className="bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl h-auto p-1 rounded-xl col-span-5">
      <div className="bg-slate-900 p-8 rounded-xl h-full">
        <div className="flex items-center mb-4">
          <h2 className="text-3xl text-white font-bold">Your Moons</h2>
          <button
            className="bg-green-600 text-white 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-1 md:grid-cols-2 gap-8">
          {props.stakingSources ? (
            props.stakingSources.map((stakingSource, index) => (
              <div key={index} className="mb-4">
                <StakingSource
                  stakingSource={stakingSource}
                  inventoryItems={props.inventoryItems}
                  claimStake={props.claimStake}
                  startStake={props.startStake}
                />
              </div>
            ))
          ) : (
            <p className="text-white text-2xl">You don't have any moons</p>
          )}
        </div>
      </div>
    </div>
  );
};

export default StakingSourcesView;
