import { h, render, Component } from "preact";
import {
  AppBar,
  Toolbar,
  Container,
  Typography,
  Button,
  Box,
  Link,
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";

class Header extends Component {
  constructor(props) {
    super(props);
    this.styles = makeStyles({
      toolbarButtons: {
        marginLeft: "auto",
      },
    });
  }

  render() {
    const classes = this.styles();
    return (
      <AppBar position="sticky">
        <Toolbar>
          <Link color="inherit" href="/">
            <Typography style={{ flex: 1 }}>Warwick New</Typography>
          </Link>
          <Box />
          <span style={{ marginLeft: "auto" }} >
            <Button
              variant="contained"
              href="/graphics-blog"
              color="secondary"
            >
              Graphics Blog
            </Button>
            {" "}
            <Button
              variant="contained"
              href="/contact"
              color="secondary"
            >
              Contact Me
            </Button>
          </span>
        </Toolbar>
      </AppBar>
    );
  }
}

export default Header;