import React from "react";

const ResourceItem = (props: {
  name: string;
  bgColor: string;
  fontColor: string;
  amount: number;
  unit: string;
}) => {
  return (
    <div
      className={
        props.bgColor +
        " bg-gradient-to-br hover:bg-gradient-to-tr rounded-lg p-3"
      }
    >
      <div className="text-white">
        <div className="flex">
          <span>
            <span className={props.fontColor + " font-bold"}>{props.name}</span>
            <h3 className="text-2xl font-bold">
              {props.amount.toLocaleString("en-US", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })}{" "}
              {props.unit}
            </h3>
          </span>
        </div>
      </div>
    </div>
  );
};

export default ResourceItem;
