import React from "react";
import SubHeader from "component/subHeader";
import TransactionList from "component/transactionList";
import WalletAddress from "component/walletAddress";
import WalletSend from "component/walletSend";

import { CreditAmount } from "component/common";

const WalletPage = props => {
  const { balance, currentPage } = props;

  return (
    <main className="main--single-column">
      <SubHeader />
      <section className="card">
        <div className="card__title-primary">
          <h3>{__("Balance")}</h3>
        </div>
        <div className="card__content">
          <CreditAmount amount={balance} precision={8} />
        </div>
      </section>
      {currentPage === "wallet" ? <TransactionList {...props} /> : ""}
      {currentPage === "send" ? <WalletSend {...props} /> : ""}
      {currentPage === "receive" ? <WalletAddress /> : ""}
    </main>
  );
};

export default WalletPage;