import { useNavigate } from 'react-router';

import { IconArrowLeft } from '@material-hu/icons/tabler';
import IconButton from '@material-hu/mui/IconButton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

type CourseHeaderProps = {
  title: string;
  backRoute: string;
};

const CourseHeader = ({ title, backRoute }: CourseHeaderProps) => {
  const navigate = useNavigate();

  return (
    <Stack
      sx={{
        backgroundColor: theme => theme.palette.new.background.layout.tertiary,
        flexDirection: 'row',
        alignItems: 'center',
        py: 1.5,
        px: 3,
        gap: 1,
      }}
    >
      <IconButton onClick={() => navigate(backRoute)}>
        <IconArrowLeft />
      </IconButton>
      <Typography
        variant="globalL"
        component="h1"
        fontWeight="fontWeightSemiBold"
      >
        {title}
      </Typography>
    </Stack>
  );
};

export default CourseHeader;