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

interface INonstopHomeHeaderProps {
  homeDetails: NonstopEarnResult;
}

export class NonstopHomeHeader extends Component<INonstopHomeHeaderProps, {}> {
  constructor(props: INonstopHomeHeaderProps) {
    super(props);
  }

  public render(): ReactNode {
    const welcomeMessage = this.props.homeDetails.welcomeMessageFormat.replace('[FIRSTNAME]', this.props.homeDetails.user.firstName);
    const pointsMessageFormatSplit = this.props.homeDetails.pointsTotalFormat.split('[POINTS]');
    const pointsMessage = (
      <>
        {pointsMessageFormatSplit[0]}
        <img src={boltYellowBg} className='ns-icon ns-icon-md' />
        {this.props.homeDetails.totalPointsDisplay}
        {pointsMessageFormatSplit[1]}
      </>
    );
    return (
      <div className='nonstop-home-hero'>
        <div className='ns-nonstop-header'>
          <div className='ns-container'>
            <h1>
              {welcomeMessage} <br />
              {pointsMessage} <br />
            </h1>
            <span className='ns-sub-heading'>{this.props.homeDetails.description}</span>
          </div>
        </div>
      </div>
    );
  }
}
