import React, { Fragment } from 'react'
import CircularProgress from '@material-ui/core/CircularProgress'
import { withStyles } from '@material-ui/core/styles'
import LinearProgress from '@material-ui/core/LinearProgress';
const styles = theme => ({
  loader: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    textAlign: 'center',
    justifyContent: 'center',
    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
    fontWeight: '500',
    fontSize: '1em',
    padding: theme.spacing(6,0),
    margin:'50px 0',
  },
  loaderGras:{
    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
    paddingTop:'10px',
    fontSize: '1.875em',
    fontWeight: '500',
    marginBottom:'30px',

  },
  loaderSecondaire:{
    fontFamily: '"Roboto", "Helvetica", "Arial", "sans-serif"',
    fontSize: '1em',
    fontWeight: '300',
  },
  root: {
    top:"200px",
    width: '100%',
    '& > * + *': {
      marginTop: theme.spacing(2),
    },
  },
})

class LoaderVideo extends React.Component {
  render() {
    const { classes, textePrincipal, texteSecondaire } = this.props;
    return (
      <div className={classes.root}>
        <div className={classes.loader }><CircularProgress color="primary" /><span className={classes.loaderGras }>{textePrincipal}</span><br/><span className={classes.loaderSecondaire }> {texteSecondaire}</span><br/></div>
        <div >
        
        </div>
      </div>
      )

  }
}

export default withStyles(styles)(LoaderVideo)