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

const ResourceAccount = (props: { account: IResourceAccount }) => {
  return (
    <div className="flex-1 bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
      <div className="bg-slate-900 text-white px-8 py-4 rounded-xl">
        <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;