import React from 'react';
import styled from 'styled-components';
import { LinearProgress} from '@material-ui/core';


const StyledLinearProgress = styled(({ color, ...other }) => (
  <LinearProgress {...other} classes={{ barColorPrimary: 'barColorPrimary' }} />
))`
  flex-grow: 1;
  && {
    background-color: ${props => props.theme.progressBar.colors.progressBarBackGroundColor};
  }
  & .barColorPrimary {
    background-color: ${props => props.theme.progressBar.colors.progessBarColor};
  }
`;

class ProgressBar extends React.Component {

  render(){
    const {value, variant} = this.props;

    return (
      <div>
        <StyledLinearProgress theme= {this.props.theme} value={value} variant={variant}/>
      </div>
    )
  } 
}

export default ProgressBar;