import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
import {renderWithCurrency} from 'common-fe/utils/render'

const bem = new BEMModule(styles)

const PortfolioValue = ({portfolio}) => {
    const {
        fundingAmount,
        value: {valueDisplay},
        defaultCurrency,
    } = portfolio
    const startingAmountDisplay = renderWithCurrency(
        Number(fundingAmount),
        defaultCurrency,
        {largeNumber: true}
    )

    const rootClassNames = bem.classNames('c-certificate__portfolio-value')
    const labelClassNames = bem.classNames(
        'c-certificate__portfolio-value__label'
    )
    const startingAmountClassNames = bem.classNames(
        'c-certificate__portfolio-value__starting-amount'
    )
    const endAmountClassNames = bem.classNames(
        'c-certificate__portfolio-value__end-amount'
    )
    return (
        <div className={rootClassNames}>
            <h3>Portfolio Value</h3>
            <dl>
                <dt className={labelClassNames}>Starting amount</dt>
                <dd className={startingAmountClassNames}>
                    {startingAmountDisplay}
                </dd>
                <dt className={labelClassNames}>End amount</dt>
                <dd className={endAmountClassNames}>{valueDisplay}</dd>
            </dl>
        </div>
    )
}

PortfolioValue.propTypes = {
    portfolio: PropTypes.object,
}

export default PortfolioValue