import React from 'react';
import Grid from 'react-css-grid';
import PropTyes from 'prop-types';
import { getVideo } from '../utils/video';

class VideoPlayer extends React.Component {
  render() {

    return (
      <Grid width={450}
            gap={16}>
        <section>
          <h2>{ this.props.title }</h2>
          <video src={ getVideo(this.props.id) } controls>
          </video>
          <h3>date { this.props.date } </h3>
        </section>
        <section className="text-left">
          <p>{ this.props.description }</p>
        </section>

      </Grid>
    )
  }
}

VideoPlayer.propTypes = {
  title: PropTypes.string,
  date: PropType.string,
  description: PropTypes.string
};

export default VideoPlayer;