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

interface IOtherWaysToEarnListItemProps {
    earnMethod: OtherWayToEarn;
    onTapped: (earnMethod: OtherWayToEarn) => void;
}

export class OtherWaysToEarnListItem extends Component<IOtherWaysToEarnListItemProps, {}> {

    public render(): ReactNode {
        return (
            <div className='ns-col-md-4'>
                <div className='nonstop-video-codes__inner--item' onClick={() => this.props.onTapped(this.props.earnMethod)}>
                    <div className='nonstop-video-codes__inner--item--icon'>
                        <span><img src={this.props.earnMethod.iconUrl} /></span>
                    </div>
                    <div className='nonstop-video-codes__inner--item--title'>
                        <p>{this.props.earnMethod.title}</p>
                    </div>
                    <div className='nonstop-video-codes__inner--item--points'>
                        <span>{this.props.earnMethod.points}</span>
                        <img src={boltYellowBg} className='ns-icon ns-icon-sm' />
                    </div>
                </div>
            </div>
        );
    }
}