MoonMiners/src/app/Components/StakingSourcesView.tsx

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

const moons = [
  {
    name: "Caelusium",
    description:
      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
    image: "/assets/moon_1.png",
    price: 100,
  },
  {
    name: "Caelusium",
    description:
      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
    image: "/assets/moon_2.png",
    price: 100,
  },
  {
    name: "Caelusium",
    description:
      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
    image: "/assets/moon_3.png",
    price: 100,
  },
  {
    name: "Caelusium",
    description:
      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
    image: "/assets/moon_4.png",
    price: 100,
  },
  {
    name: "Caelusium",
    description:
      "Caelusium is a medium-sized moon with a diverse landscape. Its craters contain a wealth of common resources, making it an ideal starting location for beginners. The moon's relatively mild weather conditions and stable surface offer a friendly environment for establishing mining operations.",
    image: "/assets/moon_5.png",
    price: 100,
  },
];

interface RowProps {
  stakingSources: IStakingSource[];
  inventoryItems: IInventoryItem[];
  claimStake: (stakingEventId: number) => void;
  startStake: (
    inventoryItemId: number,
    storeItemId: string,
    wellId: number
  ) => void;
}

const Row: React.FC<RowProps> = ({
  stakingSources,
  inventoryItems,
  claimStake,
  startStake,
}) => {
  return (
    <div className="flex justify-between items-center w-full mb-8 mt-8">
      {stakingSources.map((stakingSource, index) => (
        <div key={index} className="w-full">
          <StakingSource
            stakingSource={stakingSource}
            inventoryItems={inventoryItems}
            claimStake={claimStake}
            startStake={startStake}
          />
        </div>
      ))}
    </div>
  );
};

const moonSizes = [250, 375, 300, 225, 175, 300, 200, 150, 300, 225];

const StakingSourcesView = (props: {
  stakingSources: IStakingSource[] | null;
  inventoryItems: IInventoryItem[] | null | undefined;
  claimStake: (stakingEventId: number) => void;
  startStake: (
    inventoryItemId: number,
    storeItemId: string,
    wellId: number
  ) => void;
  createStakingSource: () => void;
}) => {
  // Generate rows of stakingSources
  const handleRows = () => {
    let rows = [];
    let currentRow = [];
    let rowSize = 3;
    if (props.stakingSources) {
      props.stakingSources.forEach((stakingSource, index) => {
        currentRow.push({ ...stakingSource, size: moonSizes[index] });

        if (currentRow.length === rowSize) {
          rows.push(currentRow);
          currentRow = [];
          rowSize = rowSize === 3 ? 4 : 3;
        }
      });

      if (currentRow.length) {
        rows.push(currentRow);
      }

      return rows;
    } else {
      return [];
    }
  };

  const rows = handleRows();

  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">
        <div className="flex items-center mb-4">
          <h2 className="text-3xl text-white 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>
        {rows.map((stakingSources, index) => (
          <Row
            key={index}
            stakingSources={stakingSources}
            inventoryItems={props.inventoryItems}
            claimStake={props.claimStake}
            startStake={props.startStake}
          />
        ))}
      </div>
    </div>
  );
};

export default StakingSourcesView;