"use client";
import React from "react";
import { IBankAccount } from "typings";
import ResourceAccount from "./ResourceAccount";

const BankAccountsView = (props: {
  bankAccount: IBankAccount | undefined;
  setLightBoxIsActive: () => void;
}) => {
  return (
    <div className="p-4">
      <div className="flex gap-8">
        <div className="flex-1 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
              onClick={() => props.setLightBoxIsActive()}
              className="px-2 text-sm mt-1 rounded-lg font-bold bg-green-400 text-green-800"
            >
              Sell Resources
            </button>
          </div>
        </div>
        {props.bankAccount &&
          props.bankAccount.resourceAccounts.map((account, id) => {
            return <ResourceAccount key={id} account={account} />;
          })}
      </div>
    </div>
  );
};

export default BankAccountsView;