text: import withStyles from '@material-ui/core/styles/withStyles';
  import InputAdornment from '@material-ui/core/InputAdornment';
  import People from '@material-ui/icons/People';
  import LockOutline from '@material-ui/icons/LockOutline';
  import Email from '@material-ui/icons/Email';
  import GridContainer from '../Grid/GridContainer';
  import GridItem from '../Grid/GridItem';
  import Card from '../Card/Card';
  import CardHeader from '../Card/CardHeader';
  import CardBody from '../Card/CardBody';
  import CardFooter from '../Card/CardFooter';
  import Button from '../CustomButtons';
  import CustomInput from '../CustomInput';
  
  import loginStyle from './styles';
  
  const SectionLogin = props => {
    const { classes } = props; // eslint-disable-line
    return (
      <div className={classes.section}>
        <div className={classes.container}>
          <GridContainer justify="center">
            <GridItem xs={12} sm={12} md={4}>
              <Card>
                <form className={classes.form}>
                  <CardHeader color="primary" className={classes.cardHeader}>
                    <h4>Login</h4>
                    <div className={classes.socialLine}>
                      <Button
                        justIcon
                        href="#pablo"
                        target="_blank"
                        color="transparent"
                        onClick={e => e.preventDefault()}
                      >
                        <i className={`${classes.socialIcons} fab fa-twitter`} />
                      </Button>
                      <Button
                        justIcon
                        href="#pablo"
                        target="_blank"
                        color="transparent"
                        onClick={e => e.preventDefault()}
                      >
                        <i className={`${classes.socialIcons} fab fa-facebook`} />
                      </Button>
                      <Button
                        justIcon
                        href="#pablo"
                        target="_blank"
                        color="transparent"
                        onClick={e => e.preventDefault()}
                      >
                        <i
                          className={`${
                            classes.socialIcons
                          } fab fa-google-plus-g`}
                        />
                      </Button>
                    </div>
                  </CardHeader>
                  <p className={classes.divider}>Or Be Classical</p>
                  <CardBody>
                    <CustomInput
                      labelText="First Name..."
                      id="first"
                      formControlProps={{
                        fullWidth: true
                      }}
                      inputProps={{
                        type: 'text',
                        endAdornment: (
                          <InputAdornment position="end">
                            <People className={classes.inputIconsColor} />
                          </InputAdornment>
                        )
                      }}
                    />
                    <CustomInput
                      labelText="Email..."
                      id="email"
                      formControlProps={{
                        fullWidth: true
                      }}
                      inputProps={{
                        type: 'email',
                        endAdornment: (
                          <InputAdornment position="end">
                            <Email className={classes.inputIconsColor} />
                          </InputAdornment>
                        )
                      }}
                    />
                    <CustomInput
                      labelText="Password"
                      id="pass"
                      formControlProps={{
                        fullWidth: true
                      }}
                      inputProps={{
                        type: 'password',
                        endAdornment: (
                          <InputAdornment position="end">
                            <LockOutline className={classes.inputIconsColor} />
                          </InputAdornment>
                        )
                      }}
                    />
                  </CardBody>
                  <CardFooter className={classes.cardFooter}>
                    <Button simple color="primary" size="lg">
                      Get started
                    </Button>
                  </CardFooter>
                </form>
              </Card>
            </GridItem>
          </GridContainer>
        </div>
      </div>
    );
  };
  
  export default withStyles(loginStyle)(SectionLogin);
  