import React, { Component } from "react";
import Radium from "radium";
import { FormattedMessage } from "react-intl";

const style = {
    viewMore: {
        margin: '-15px',
        padding: '15px',
        display: 'block',
        color: '#fff',
        fontSize: '12px',
        ':hover': {
            backgroundColor: '#393939'
        }
    }
};

class CluedInViewMoreButton extends Component {
    render() {
        const { number } = this.props;

        if( number && number > 0 ) {
            return <a style={style.viewMore}>+{number} <FormattedMessage
                id="CluedInViewMore.More"></FormattedMessage></a>;
        }

        return <a style={style.viewMore}><FormattedMessage id="CluedInViewMore.ViewMore"></FormattedMessage></a>;
    }
}

export default Radium( CluedInViewMoreButton );