import Stack from '@mui/material/Stack';
import IconButton from '@mui/material/IconButton';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import { makeStyles, Typography } from '@material-ui/core'

const useStyles = makeStyles({
  container: {
    paddingLeft: 10,
    paddingBottom: 3,
    width: 482,
    display: 'flex',
    alignContent: 'center',
    alignItems: 'center',
  },
  iconArrow: {
    '&:hover': {
      transform: 'rotate(360deg)',
      transition: 'all 250ms ease-out ',
    }
  },
})

interface IToolBar {
  setSelectedIndex: React.Dispatch<React.SetStateAction<number | null>>
}

const ToolBar = ({setSelectedIndex}:IToolBar) => {
  const classes = useStyles()

  return (
    <Stack className={classes.container} direction="row" spacing={21}>
      <IconButton onClick={() => setSelectedIndex(2)} aria-label="delete" size="medium">
        <ArrowBackIcon className={classes.iconArrow} fontSize='medium'/>
      </IconButton>
      <Typography style={{marginLeft:20,color: '#474747'}} variant="h6" color="initial">Edit profile</Typography>
    </Stack>
    )
}

export default ToolBar