import React, {useMemo} from 'react'
import PropTypes from 'prop-types'
import {uuid} from 'common-fe/utils'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
import Tag from 'react-uikit/tag'
import Tooltip from 'react-uikit/tooltip'

const bem = new BEMModule(styles)

const BadgeTag = ({badge}) => {
    const rootClassNames = bem.classNames('c-course-badges-tag')
    const tagClassNames = bem.classNames('c-course-badges-tag__tag')
    const tooltipId = useMemo(() => `badge-${uuid()}`, [])
    return (
        <div data-tip="" data-for={tooltipId} className={rootClassNames}>
            <Tag className={tagClassNames}>{badge.label}</Tag>
            <Tooltip id={tooltipId} clickable isAnchored isDark>
                The participant has demonstrated {badge.skill}.
            </Tooltip>
        </div>
    )
}

BadgeTag.propTypes = {
    badge: PropTypes.object,
}

export default BadgeTag