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

interface INonstopLifetimeSummaryBarProps {
    totalPointsEarned: string;
    totalPointsSpent: string;
}

export class NonstopLifetimeSummaryBar extends Component<INonstopLifetimeSummaryBarProps, {}> {
    public render(): ReactNode {
        return (
             <div className='ns-container nonstop-history-header-points'>
             <div className='ns-row'>
             <div className='ns-col-6 text-center text-md-right'>
             <p>
                 <span>Lifetime spent:</span>
              <span>
                  <img src={boltYellowBg} className='ns-icon ns-icon-md' />{this.props.totalPointsSpent}</span>
                  </p>
             </div>
             <div className='ns-col-6 text-center text-md-left'>
                 <p>
                   <span>Lifetime earned:</span>
                    <span><img src={boltYellowBg} className='ns-icon ns-icon-md' />{this.props.totalPointsEarned}</span>
                </p>
                </div>
              </div>
         </div>
        );
    }
}