text: import {
    Box,
    Button,
    Card,
    CardContent, InputAdornment,
    SvgIcon, TextField, Typography
  } from '@mui/material';
  import { useState } from 'react';
  import { useDispatch, useSelector } from 'react-redux';
  import { increment } from "../../features/counter/counterSlice";
  import { Download as DownloadIcon } from '../../icons/download';
  import { Search as SearchIcon } from '../../icons/search';
  import { Upload as UploadIcon } from '../../icons/upload';
  
  export const AccountListToolbar = (props) => {
    const [titleButton, setTitleButton] = useState("Add Accounts");
    const handleClick = () => {
      setTitleButton(titleButton == "Add Accounts" ? "Close" : "Add Accounts");
      props.clickShowForm();
    }
  
    return (
      <Box {...props}>
        <Box
          sx={{
            alignItems: 'center',
            display: 'flex',
            justifyContent: 'space-between',
            flexWrap: 'wrap',
            m: -1
          }}
        >
          <Typography
            sx={{ m: 1 }}
            variant="h4"
          >
            Accounts
          </Typography>
          <Box sx={{ m: 1 }}>
            <Button
              color="primary"
              variant="contained"
              onClick={handleClick}
            >
              {titleButton}
            </Button>
          </Box>
        </Box>
        <Box sx={{ mt: 3 }}>
          <Card>
            <CardContent>
              <Box sx={{ maxWidth: 500 }}>
                <TextField
                  fullWidth
                  InputProps={{
                    startAdornment: (
                      <InputAdornment position="start">
                        <SvgIcon
                          color="action"
                          fontSize="small"
                        >
                          <SearchIcon />
                        </SvgIcon>
                      </InputAdornment>
                    )
                  }}
                  placeholder="Search account"
                  variant="outlined"
                />
              </Box>
            </CardContent>
          </Card>
        </Box>
      </Box>
    );
  }
  