import React from 'react'
import BEMModule from 'utils/bem'
import Icon from 'react-uikit/icon'
import PropTypes from 'prop-types'
import routes from 'global/constants/routes'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const CourseParticipants = ({course, className, isOwner}) => {
    const {paidSeats, currentSeats = '— —'} = course
    const isPaidPlan = isOwner && paidSeats

    const rootClassNames = bem.classNames('c-course-participants', className)
    const iconClassNames = bem.classNames('c-course-participants__icon')

    return (
        <div className={rootClassNames}>
            <h3>
                <Icon name="participants" className={iconClassNames} />
                Participants
            </h3>
            <p>
                {currentSeats}
                {isPaidPlan && <span> / {paidSeats}</span>}
            </p>
            {isPaidPlan && (
                <a
                    href={routes.PAYMENT}
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Upgrade plan for more seats
                </a>
            )}
        </div>
    )
}

CourseParticipants.propTypes = {
    className: PropTypes.string,
    course: PropTypes.object,
    isOwner: PropTypes.bool,
}

export default CourseParticipants