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;