import React from 'react'
import PropTypes from 'prop-types'
import Button from 'react-uikit/button'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const UserListItem = ({item, onClick}) => {
    const classes = bem.classNames('c-course-list-edit__item')
    const buttonClasses = bem.classNames(
        'c-course-list-edit__item__remove-button'
    )
    const click = () => onClick && onClick(item)

    return (
        <div className={classes}>
            {`${item.lastName}, ${item.firstName}`}
            <Button.Remove className={buttonClasses} onClick={click} />
        </div>
    )
}

UserListItem.propTypes = {
    item: PropTypes.shape({
        firstName: PropTypes.string,
        lastName: PropTypes.string,
    }),
    onClick: PropTypes.func,
}

export default UserListItem