text: import React, { useState } from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import {
    Box,
    Button,
    Card,
    CardContent,
    CardHeader,
    Divider,
    TextField,
    makeStyles,
    Grid
  } from '@material-ui/core';
  
  const useStyles = makeStyles(({
    root: {
      
    },
    header:{
      display:"flex",
      justifyContent:"space-between",
      width:"100%",
      padding:"12px"
    }
  }));
  
  const Password = ({ className, ...rest }) => {
    const classes = useStyles();
    const [values, setValues] = useState({
      password: '',
      confirm: ''
    });
  
    const handleChange = (event) => {
      setValues({
        ...values,
        [event.target.name]: event.target.value
      });
    };
  
    return (
      <form
        className={clsx(classes.root, className)}
        {...rest}
      >
        <Card>
          <CardHeader
            subheader="Update password"
            title="Password"
          />
          <Grid item lg={12} >
            <div class={classes.header}>
                <p>Password</p>
                <p>Update password</p>
            </div>
  
          </Grid>
          <Divider />
          <CardContent>
            <TextField
              fullWidth
              label="Password"
              margin="normal"
              name="password"
              onChange={handleChange}
              type="password"
              value={values.password}
              variant="outlined"
            />
            <TextField
              fullWidth
              label="Confirm password"
              margin="normal"
              name="confirm"
              onChange={handleChange}
              type="password"
              value={values.confirm}
              variant="outlined"
            />
          </CardContent>
          <Divider />
          <Box
            display="flex"
            justifyContent="flex-end"
            p={2}
          >
            <Button
              color="primary"
              variant="contained"
            >
              Update
            </Button>
          </Box>
        </Card>
      </form>
    );
  };
  
  Password.propTypes = {
    className: PropTypes.string
  };
  
  export default Password;
  