import {Container, Divider, Typography} from "@mui/material";
import LogIn from "./LogIn";
import Image from "next/image";

export default function Header() {
  return (
    <Container maxWidth="xl" component="main" sx={{ pt: 2, pb: 3 }}>
      <div className="header-container">
        <div className="header-title" >
          <Typography variant="h3" component="h3">
            kmpr.at F1 Manager Setup Rechner
          </Typography>
        </div>
        <div className="header-user">
          <LogIn />
        </div>
      </div>
      <Divider variant="fullWidth" sx={{ mt: 1, mb: 1 }}/>
      <div style={{ display: "flex", flexWrap: 'wrap' }}>
        <div className="header-flex-description">
          <Typography className="header-description">
            Tutorial: <a href="https://steamcommunity.com/sharedfiles/filedetails/?id=2855732906">Steam Guide</a>
            <br />
          </Typography>
        </div>
        <div className="header-flex-app-store" >
        </div>
      </div>
      <Divider variant="fullWidth" sx={{ mt: 1 }} />
    </Container>
  )
}