import React from 'react'
import PropTypes from 'prop-types'

import styles from './styles.scss'
import BEMModule from 'utils/bem'
const bem = new BEMModule(styles)

import Icon from 'react-uikit/icon'

const PortfolioMetrics = ({className, metrics}) => {
    const rootClassNames = bem.classNames('c-portfolio-metrics', className)
    const iconClassNames = bem.classNames('c-portfolio-metrics__icon')

    const headingClassNames = bem.classNames('c-portfolio-metrics__heading')
    const amountClassNames = bem.classNames('c-portfolio-metrics__amount')

    return (
        <div className={rootClassNames}>
            <div className={headingClassNames}>
                <h3>
                    <Icon className={iconClassNames} name="tab-activity" />
                    <span>&emsp;All-Time Metrics</span>
                </h3>
            </div>
            <div>
                {metrics.map((el, index) => (
                    <p
                        key={`portfolio-metric-${index}`}
                        className={amountClassNames}
                    >
                        <span>{el.label}</span>
                        <span>{el.amount}</span>
                    </p>
                ))}
            </div>
        </div>
    )
}

PortfolioMetrics.propTypes = {
    className: PropTypes.string,
    metrics: PropTypes.arrayOf(
        PropTypes.shape({
            label: PropTypes.string,
            amount: PropTypes.string,
        })
    ),
}

export default React.memo(PortfolioMetrics)