import { Component, ReactNode } from 'react';
import * as React from 'react';
import boltYellowBg from '../../images/bolt-yellow-bg.svg';
import { OtherWayToEarn } from '../../models/nonstophome/otherWayToEarn';
import { CloseButton } from './CloseButton';

interface IOtherWayToEarnInfoProps {
    onExit: () => void;
    earnMethod: OtherWayToEarn | null;
}

export class OtherWayToEarnInfo extends Component<IOtherWayToEarnInfoProps, {}> {

    public render(): ReactNode {
        if (!this.props.earnMethod) {
            this.props.onExit();
            return <div></div>;
        } else {
            return (
                <div className='ns-overlay'>
                    <div className='ns-container d-flex h-100'>
                        <CloseButton onClick={() => this.props.onExit()} />
                        <div className='nonstop-card text-center align-self-center justify-content-center ns-w-100 animated fadeIn'>
                            <div className='ns-row justify-content-center'>
                                <div className='ns-col-12'>
                                    <span className='informational-ff-logo'>
                                        <img src={this.props.earnMethod.iconUrl} />
                                    </span>
                                    <p className='nonstop-preamble-centered'>
                                        {this.props.earnMethod.description}<span className='nonstop-highlight'><img src={boltYellowBg} className='ns-icon ns-icon-md' />{this.props.earnMethod.points} {this.props.earnMethod.points === 1 ? 'point' : 'points'}</span>
                                    </p>
                                </div>
                                <div className='col-sm-5 col-md-5 col-lg-4'>
                                    <a href={this.props.earnMethod.learnMoreUrl} target='_blank' className='btn-nonstop btn-outline-primary btn-round ns-btn-learn-more'>Learn More <i className='fa fa-chevron-right'></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            );
        }
    }
}