import {
  AppBar,
  Toolbar,
  Container,
  Typography,
  Skeleton,
} 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, containerMaxWidth } = useContext(Context);
  return (
    <AppBar position='sticky'>
      <Container maxWidth={containerMaxWidth} className='header-container'>
        <Toolbar className='header-container'>
          <Link to='/' style={{ textDecoration: 'none', color: 'inherit' }}>
            <img src='/badge-white.png' className='header-icon'></img>
          </Link>
          <Typography variant='h6'>{title}</Typography>
          {title === '' && <Skeleton height={20} width={200}></Skeleton>}
        </Toolbar>
      </Container>
    </AppBar>
  );
}