import {
  AppBar,
  Toolbar,
  Stepper,
  Step,
  Box,
  Container,
  StepButton,
  Typography,
} from '@mui/material';
import { useContext, useEffect, useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';

import '../css/Header.css';
import { Context } from '../data/Context';

/**
 * Creates a Header Component that displays the reservation steps
 * @return {JSX.Element}
 */
export default function Header() {
  const { title } = useContext(Context);
  return (
    <AppBar position='sticky'>
      <Container maxWidth='lg'>
        <Toolbar className='header-container'>
          <Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}>
            <img src='/logo192.png' className='header-icon'></img>
          </Link>
          <Typography variant='h6'>{title}</Typography>
        </Toolbar>
      </Container>
    </AppBar>
  );
}