import React from 'react'
import PropTypes from 'prop-types'

import BEMModule from 'utils/bem'
import styles from './styles.scss'
import Icon from 'react-uikit/icon'
const bem = new BEMModule(styles)

const TradeHeader = ({title, description, link}) => {
    const rootClassNames = bem.classNames('c-trade-header')
    const titleClassNames = bem.classNames('c-trade-header__title')
    const subtitleClassNames = bem.classNames('c-trade-header__subtitle')
    const descriptionClassNames = bem.classNames('c-trade-header__description')
    const linkIconClassNames = bem.classNames('c-trade-header__link-icon')

    return (
        <section className={rootClassNames}>
            <div>
                <h2 className={subtitleClassNames}>Trade</h2>
                <h1 className={titleClassNames}>{title}</h1>
            </div>
            <div>
                <p className={descriptionClassNames}>
                    {description}&ensp;
                    {link && (
                        <a
                            href={link}
                            title={`Learn more about ${title}`}
                            target="_blank"
                            rel="noopener noreferrer"
                        >
                            Learn more &nbsp;
                            <Icon name="link" className={linkIconClassNames} />
                        </a>
                    )}
                </p>
            </div>
        </section>
    )
}

TradeHeader.propTypes = {
    description: PropTypes.string,
    link: PropTypes.string,
    title: PropTypes.string,
}

export default TradeHeader