text: import React from "react";
  import PropTypes from "prop-types";
  import clsx from "clsx";
  import { makeStyles } from "@mui/styles";
  import { Button, Grid, Typography } from "@mui/material";
  
  const useStyles = makeStyles(() => ({
    root: {},
  }));
  
  function Header({ className, addAccount, ...rest }) {
    const classes = useStyles();
    const handleAddAccount = () => {
      addAccount();
    };
    return (
      <div {...rest} className={clsx(classes.root, className)}>
        <Grid alignItems="flex-end" container justify="space-between" spacing={3}>
          <Grid item>
            <Typography component="h2" gutterBottom variant="overline">
              Management
            </Typography>
            <Typography component="h1" variant="h3">
              Accounts
            </Typography>
          </Grid>
          <Grid item>
            <Button
              color="primary"
              variant="contained"
              onClick={handleAddAccount}
            >
              Add Account
            </Button>
          </Grid>
        </Grid>
      </div>
    );
  }
  
  Header.propTypes = {
    className: PropTypes.string,
  };
  
  export default Header;
  