import React from 'react'
import Button from 'react-uikit/button'
import WarnTemplate from '../templates/warn'
import routes from 'global/constants/routes'
import {history} from 'router/history'
import BEMModule from 'utils/bem'
import styles from './styles.scss'

const bem = new BEMModule(styles)

const navigateToPayment = () => history.push(routes.PAYMENT)

const UpgradeNowBanner = (props) => {
    const bodyClasses = bem.classNames('c-upgrade-now-banner__body')
    const buttonClasses = bem.classNames('c-upgrade-now-banner__button')
    const text = 'Ready for more than just ETFs? Upgrade to premium today!'

    return (
        <WarnTemplate {...props}>
            <span className={bodyClasses} title={text}>
                {text}
            </span>
            <Button
                className={buttonClasses}
                constrained
                text="Upgrade"
                onClick={navigateToPayment}
            />
        </WarnTemplate>
    )
}

export default UpgradeNowBanner