"use client";
import React, { useState, useEffect } from "react";
import {
  IBankAccount,
  IConversionPair,
  IGameConfig,
  IResourceAccount,
} from "typings";
import Account from "./Account";
import { BiLoaderAlt } from "react-icons/bi";

const BankAccountsView = (props: {
  bankAccount: IBankAccount | undefined;
  sellResource: (pairs: IConversionPair[]) => void;
  gameConfig: IGameConfig | undefined;
}) => {
  if (props.bankAccount === undefined) {
    return (
      <div className="m-4 rounded-lg bg-slate-700 h-20 flex items-center">
        <BiLoaderAlt className="text-white animate-spin w-28 m-auto" />
      </div>
    );
  }

  return (
    <div className="p-4">
      <div className="md:flex items-center gap-8">
        <div className="flex-1 md:mb-0 mb-2 bg-gradient-to-tr from-purple-600 via-blue-600 to-indigo-700 h-auto p-1 rounded-xl">
          <div className="text-white bg-slate-900 px-8 py-4 rounded-xl">
            <span className="text-green-600 font-bold">Moonbucks</span>
            <h3 className="text-2xl font-bold">
              $
              {props.bankAccount?.primaryBalance.toLocaleString("en-US", {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })}
            </h3>
          </div>
        </div>
        {props.bankAccount &&
          props.bankAccount?.resourceAccounts.length > 0 &&
          props.bankAccount.resourceAccounts.map((account, id) => {
            return (
              <Account
                key={id}
                account={account}
                sellResource={props.sellResource}
                gameConfig={props.gameConfig}
              />
            );
          })}
      </div>
    </div>
  );
};

export default BankAccountsView;
