import React from 'react';
import {Link} from 'react-router-dom';
import BigScreenVideo from './BigScreenVideo';

class AddComments extends React.Component {
  render() {
    console.log('COMMENT DATA: ', this.props.commentData)
    const timeGiven = this.props.timestamp
    console.log('timeGiven: ', timeGiven)
    const timeDisplay = new Date(timeGiven)
    console.log('timeDisplay: ', timeDisplay)
    return (
      <div>
       <div className="video-list-container">
        <p id="video-container-heading">Up next</p>

        {this.props.videoData.map((videoItem, index) => (
          <Link to={videoItem.id}>
          <BigScreenVideo
            key={videoItem.Id || index}
            getCommentData={this.props.getCommentData}
            image={videoItem.image}
            title={videoItem.title}
            channel={videoItem.channel}
            viewCount={videoItem.views}
            id={videoItem.id}
          />
          </Link>
        ))}
      </div>
      </div>
    )
  }
}
export default AddComments