text: import React from "react";
  // @material-ui/core components
  import { makeStyles } from "@material-ui/core/styles";
  import InputAdornment from "@material-ui/core/InputAdornment";
  import Icon from "@material-ui/core/Icon";
  // @material-ui/icons
  import Email from "@material-ui/icons/Email";
  import People from "@material-ui/icons/People";
  // core components
  import Header from "components/Header/Header.js";
  import HeaderLinks from "components/Header/HeaderLinks.js";
  import Footer from "components/Footer/Footer.js";
  import GridContainer from "components/Grid/GridContainer.js";
  import GridItem from "components/Grid/GridItem.js";
  import Button from "components/CustomButtons/Button.js";
  import Card from "components/Card/Card.js";
  import CardBody from "components/Card/CardBody.js";
  import CardHeader from "components/Card/CardHeader.js";
  import CardFooter from "components/Card/CardFooter.js";
  import CustomInput from "components/CustomInput/CustomInput.js";
  
  import styles from "assets/jss/material-kit-react/views/loginPage.js";
  
  import image from "assets/img/bg7.jpg";
  
  const useStyles = makeStyles(styles);
  
  export default function RegisterPage(props) {
    const [cardAnimaton, setCardAnimation] = React.useState("cardHidden");
    setTimeout(function() {
      setCardAnimation("");
    }, 700);
    const classes = useStyles();
    const {  onChange, onSubmit, ...rest } = props;
    return (
      <div>
        <Header
          absolute
          color="transparent"
          brand="Flutag"
          {...rest}
        />
        <div
          className={classes.pageHeader}
          style={{
            backgroundImage: "url(" + image + ")",
            backgroundSize: "cover",
            backgroundPosition: "top center"
          }}
        >
          <div className={classes.container}>
            <GridContainer justify="center">
              <GridItem xs={12} sm={12} md={4}>
                <Card className={classes[cardAnimaton]}>
                  <form className={classes.form}>
                    <CardHeader color="primary" className={classes.cardHeader}>
                      <h4>Register</h4>
                      <Icon >
                                lock_outline
                              </Icon>
                    </CardHeader>
                   
                    <CardBody>
                   
                      <CustomInput
                        labelText="First Name ..."
                        id="email"
                        onChange={onChange}
                        formControlProps={{
                          fullWidth: true
                        }}
                        inputProps={{
                          type: "text",
                          name: "firstname",
                         
                        }}
                      />
                      <CustomInput
                        labelText="Last Name..."
                        id="email"
                        onChange={onChange}
                        formControlProps={{
                          fullWidth: true
                        }}
                        inputProps={{
                          type: "text",
                          name: "lastname",
                         
                        }}
                      />
                       <CustomInput
                        labelText="Email..."
                        id="email"
                        onChange={onChange}
                        formControlProps={{
                          fullWidth: true
                        }}
                        inputProps={{
                          type: "email",
                          name: "email",
                          endAdornment: (
                            <InputAdornment position="end">
                              <Email className={classes.inputIconsColor} />
                            </InputAdornment>
                          )
                        }}
                      />
                       <CustomInput
                        labelText="Phone Number..."
                        id="email"
                        onChange={onChange}
                        formControlProps={{
                          fullWidth: true
                        }}
                        inputProps={{
                          type: "text",
                          name: "phoneno",
                         
                        }}
                      />
                      <CustomInput
                        labelText="Password"
                        id="pass"
                        onChange={onChange}
                       
                        formControlProps={{
                          fullWidth: true
                        }}
                        inputProps={{
                          type: "password",
                          name: "password",
                          endAdornment: (
                            <InputAdornment position="end">
                              <Icon className={classes.inputIconsColor}>
                                lock_outline
                              </Icon>
                            </InputAdornment>
                          ),
                          autoComplete: "off"
                        }}
                      />
                    </CardBody>
                    <CardFooter className={classes.cardFooter}>
                      <Button  color="primary" size="lg" onClick={onSubmit}>
                        Register
                      </Button>
                    </CardFooter>
                  </form>
                </Card>
              </GridItem>
            </GridContainer>
          </div>
         
        </div>
      </div>
    );
  }
  