import { Component, ReactNode } from 'react';
import * as React from 'react';
import { EarnRow } from '../../models/nonstophome/earnRow';
import { EarnRowItem } from '../../models/nonstophome/earnRowItem';
import { EarnItem } from './EarnItem';

interface IEarnRowListItemProps {
    row: EarnRow;
    onSelect: (rowItem: EarnRowItem) => void;
}

export class EarnRowListItem extends Component<IEarnRowListItemProps, {}> {
    public render(): ReactNode {
        return (
            <div className='nonstop-video-grid'>
                <div className='nonstop-video-grid__inner'>
                    <h2>{this.props.row.title}</h2>
                    <div className='ns-row ns-row-tight'>
                        {this.props.row.items.map((rowItem) => <EarnItem item={rowItem} onSelect={this.props.onSelect} key={rowItem.id} />)}
                    </div>
                </div>
            </div>
        );
    }
}