import * as React from 'react';
import { Component } from 'react';
import nsCashingIn from '../../images/ns-cashing-in.svg';
import nsExplainer from '../../images/ns-explainer.svg';
import { EarnPointsSummary } from '../../models/nonstophome/earnPointsSummary';
import { SpendCostSummary } from '../../models/nonstophome/spendCostSummary';

interface INonstopSpendCostSummaryProps {
    costSummary: SpendCostSummary;
    earnSummary: EarnPointsSummary;
}

export class NonstopSpendCostSummary extends Component<INonstopSpendCostSummaryProps, {}> {
    public render(): React.ReactNode {
        return (
            <div className='ns-points-section'>
                <div className='ns-container'>
                     <div className='ns-row'>
                          <div className='col-md-6 ns-earning-points'>
                             <h3>{this.props.earnSummary.title}</h3>
                             <img src={nsExplainer} alt='' className='img-fluid d-sm-inline d-md-none'/>
                             <p>{this.props.earnSummary.description}</p>
                             <img src={nsExplainer} alt='' className='img-fluid d-none d-md-block'/>
                          </div>
                             <div className='col-md-6 ns-spending-points'>
                                 <h3>{this.props.costSummary.title}</h3>
                                 <p>{this.props.costSummary.description} </p>
                                  <img src={nsCashingIn} alt='' className='img-fluid w-100'/>
                </div>
                       </div>
                  </div>
             </div>
        );
    }
}