import { KeyboardBackspace } from '@mui/icons-material'
import { Box, styled as styledMui, Typography } from '@mui/material'
import { useNavigate } from 'react-router-dom'

const StyledSideMenuHeader = styledMui(Box)(({ theme }) => ({
  height: '60px',
  display: 'flex',
  gap: '8px',
  alignItems: 'center',
  cursor: 'pointer',
  background: '#1d1d1d',
  padding: '20px',
  marginBottom: '25px',
}))

export const SideMenuHeader = ({ title, path }) => {
  const navigate = useNavigate()

  return (
    <StyledSideMenuHeader
      onClick={() => {
        navigate(path)
      }}
    >
      <KeyboardBackspace />
      <Typography variant="h3" color={'white'}>
        {title}
      </Typography>
    </StyledSideMenuHeader>
  )
}
