import React from 'react'
import PropTypes from 'prop-types'
import Tag from 'react-uikit/tag'
import optionTypes from 'common-fe/constants/option-types'
import BEMModule from 'utils/bem'
import styles from './styles.scss'
const bem = new BEMModule(styles)

const OptionHeader = ({security}) => {
    const {optionType, displayName, underlyingIssuerName} = security

    const rootClassNames = bem.classNames('c-option-header')
    const titleClassNames = bem.classNames('c-option-header__title')
    const subtitleClassNames = bem.classNames('c-option-header__subtitle')
    const tagClassNames = bem.classNames('c-option-header__tag')

    return (
        <header className={rootClassNames}>
            <p className={subtitleClassNames}>{underlyingIssuerName}</p>
            <p className={titleClassNames}>
                <Tag className={tagClassNames} size="small">
                    {optionTypes[optionType].label}
                </Tag>
                {displayName}
            </p>
        </header>
    )
}

OptionHeader.propTypes = {
    security: PropTypes.object,
}

export default OptionHeader