import { AppBar, Toolbar, Container, Typography } from '@mui/material';
import { useContext } from 'react';
import { Link } 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>
  );
}