import { Component } from 'react';
import * as React from 'react';
import { Link } from 'react-router-dom';
import nonstopPointsYellow from '../../images/bolt-yellow-bg.svg';
import nonstopPointsWhite from '../../images/nonstop-points-white.svg';
import { NonstopHomeTab } from '../../models/nonstophome/nonstophometab';

interface INonstopHomeNavBarProps {
    currentTab: NonstopHomeTab;
}

export class NonstopHomeNavBar extends Component<INonstopHomeNavBarProps, {}> {

    public render(): React.ReactNode {
        return (
            <ul className='ns-tab-nav'>
                <li className={this.props.currentTab === NonstopHomeTab.Earn ? 'current' : ''}>
                    <Link to={this.props.currentTab === NonstopHomeTab.Earn ? '' : '/'}>
                        <img src={this.props.currentTab === NonstopHomeTab.Earn ? nonstopPointsYellow : nonstopPointsWhite} className='ns-icon ns-icon-md hidden-sm-down' />Earn
                    </Link>
                </li>
                <li className={this.props.currentTab === NonstopHomeTab.History ? 'current' : ''}>
                    <Link to={this.props.currentTab === NonstopHomeTab.History ? '' : '/history'}>
                        History
                    </Link>
                </li>
                <li className={this.props.currentTab === NonstopHomeTab.HowItWorks ? 'current' : ''}>
                    <Link to={this.props.currentTab === NonstopHomeTab.HowItWorks ? '' : '/how-it-works'}>
                        How It Works
                    </Link>
                </li>
            </ul>
        );
    }
}