"use client";
import React from "react";
import { IResourceAccount } from "typings";
import { resourceToBg, resourceToFc } from "../../utils/helpers";

const ResourceAccount = (props: { account: IResourceAccount }) => {
  return (
    <div
      className={
        resourceToBg(props.account.resourceType) +
        " bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3 flex-1"
      }
    >
      <div className="text-white">
        <span
          className={resourceToFc(props.account.resourceType) + " font-bold"}
        >
          {props.account.resourceType}
        </span>
        <h3 className="text-2xl font-bold">
          {props.account.balance.toLocaleString("en-US", {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2,
          })}{" "}
          kg
        </h3>
      </div>
    </div>
  );
};

export default ResourceAccount;
