"use client";
import React from "react";
import { Resource } from "typings";
import ResourceItem from "./ResourceItem";

const ResourceView = (props: { resources: Resource[] }) => {
  return (
    <div className="p-4">
      <div className="grid grid-cols-5 gap-8">
        <div className="bg-green-800 rounded-lg p-3">
          <div className="text-white">
            <span className="text-green-400">Moonbucks</span>
            <h3 className="text-2xl font-bold">$5,342.23</h3>
            <button className="px-2 text-sm mt-1 rounded-lg font-bold bg-green-400 text-green-800">
              Sell Resources
            </button>
          </div>
        </div>
        {props.resources.map((resource, id) => {
          const resourceCardProps = {
            resource: resource,
            isMining: true,
            yieldPerSecond: 0.15,
          };
          return (
            <ResourceItem key={id} resourceCardProps={resourceCardProps} />
          );
        })}
      </div>
    </div>
  );
};

export default ResourceView;