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

const useStyles = makeStyles({
  toolBar: {
    color: '#b1aeae',
    height: '7vh',
  },
  iconArrow: {
    '&:hover': {
      transform: 'rotate(360deg)',
      transition: 'all 250ms ease-out ',
    }
  },
})

interface ISearchBar {
  handleClick:() => void,
}

const ToolBar = ({ handleClick }:ISearchBar) => {
  
  const classes = useStyles()
    return (
        <Toolbar className={classes.toolBar}>
            <IconButton onClick={handleClick}>
                <ArrowBackIcon className={classes.iconArrow} /> 
            </IconButton>

      </Toolbar>
    )
}

export default ToolBar