import { Component, ReactNode } from 'react';
import * as React from 'react';
import { OtherWayToEarn } from '../../models/nonstophome/otherWayToEarn';
import { OtherWaysToEarnListItem } from './OtherWaysToEarnListItem';

interface IOtherWaysToEarnListProps {
    otherWaysToEarn: OtherWayToEarn[];
    onSelect: (earnMethod: OtherWayToEarn) => void;
}

export class OtherWaysToEarnList extends Component<IOtherWaysToEarnListProps, {}> {

    public render(): ReactNode {
        return (
            <div className='nonstop-home-ctas'>
                <div className='ns-container'>
                    <div className='nonstop-video-codes__title'>
                        <h3>Other ways to earn</h3>
                    </div>
                    <div className='nonstop-video-codes__inner'>
                        <div className='ns-row justify-content-left row-tight'>
                                {this.props.otherWaysToEarn.map((item) => <OtherWaysToEarnListItem earnMethod={item} onTapped={this.props.onSelect} key={item.id} />)}
                        </div>
                    </div>
                </div>
            </div>
        );
    }

}