import Grid from 'react-css-grid'
import React from 'react';
import PropTypes from 'prop-types';
import VideoItem from "./VideoItem";
import SectionHeading from "./SectionHeading";
import {Link} from 'react-router-dom';

class RandomTopic extends React.Component {

  render() {
    return (
      <section>
        <SectionHeading title={this.props.topicName}/>
        <Grid
          width={450}
          gap={16}>
          {this.props.videos.map(video =>
            <VideoItem id={video.id} title={video.title}/>
          )}
          <Link to="/topics">
            See All Topics
          </Link>
          <Link to="/topics">
            See All videos of {this.props.topicName} ({this.props.topicCount})
          </Link>
        </Grid>
      </section>

    )
  }
}

RandomTopic.propTypes = {
  topicName: PropTypes.string,
  videos: PropTypes.array,
  loading: PropTypes.bool,
  topicCount: PropTypes.number
};

export default (RandomTopic);