import React from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { getThumbnail } from '../utils/video';
class VideoItem extends React.Component {

  render() {
    const videoLink = `/videos/${this.props.id}`;
    return (
      <Link to={ videoLink }>
        <section className="video-item">
          <section className="video-thumbnail-container">
            <img className="video-thumbnail" src={ getThumbnail(this.props.id) } alt=""/>
          </section>
          <h3 className="video-title">{ this.props.title }</h3>
        </section>
      </Link>
    )
  }
}

VideoItem.propTypes = {
  id: PropTypes.string,
  title: PropTypes.string,
}
export default (VideoItem);