import React from 'react'
import PropTypes from 'prop-types'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
import Avatar from 'react-uikit/avatar'
import {Flex} from 'react-uikit/layout'

const bem = new BEMModule(styles)

const UserProfile = ({portfolio: {users = [{}], name}}) => {
    const {avatarUrl, firstName, lastName} = users[0]

    const rootClassNames = bem.classNames('c-certificate__user-profile')
    const avatarClassNames = bem.classNames(
        'c-certificate__user-profile__avatar'
    )
    const portfolioNameClassNames = bem.classNames(
        'c-certificate__user-profile__portfolio-name'
    )
    const userNameClassNames = bem.classNames(
        'c-certificate__user-profile__user-name'
    )

    return (
        <div className={rootClassNames}>
            <Flex direction="column" justify="center">
                <Avatar
                    avatarUrl={avatarUrl}
                    className={avatarClassNames}
                    firstName={firstName}
                    lastName={lastName}
                />
            </Flex>
            <Flex direction="column" justify="center">
                <h3 className={portfolioNameClassNames}>{name}</h3>
                <p className={userNameClassNames}>
                    {firstName} {lastName}
                </p>
            </Flex>
        </div>
    )
}

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

export default UserProfile