import * as React from "react";
import CssBaseline from "@mui/material/CssBaseline";
import AppBar from "@mui/material/AppBar";
import Box from "@mui/material/Box";
import Container from "@mui/material/Container";
import Toolbar from "@mui/material/Toolbar";
import Paper from "@mui/material/Paper";
import Stepper from "@mui/material/Stepper";
import Step from "@mui/material/Step";
import StepLabel from "@mui/material/StepLabel";
import Button from "@mui/material/Button";
import Link from "@mui/material/Link";
import Typography from "@mui/material/Typography";
import { createTheme, ThemeProvider } from "@mui/material/styles";
import MainHeader from "../components/MainHeader";
import Grid from "@mui/material/Grid";
import { IconButton, TextField } from "@mui/material";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
const theme = createTheme();

export default function LoginPage() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <MainHeader />

      <Container maxWidth="sm" sx={{ mt: "32vh" }}>
        <Paper
          variant="outlined"
          elevation="5"
          sx={{
            p: { xs: 2, sm: 3 },
          }}
        >
          <Box
            sx={{ display: "flex", alignItems: "center" }}
            position="absolute"
          >
            <IconButton color="primary">
              <ArrowBackIcon />
            </IconButton>
          </Box>

          <Typography variant="h4" align="center">
            Admin section
          </Typography>

          <Box
            sx={{
              display: "flex",
              justifyContent: "center",
              mt: 5,
              mb: 3,
              px: { xs: "10%", sm: "20%" },
            }}
          >
            <TextField id="username" label="Username" fullWidth />
          </Box>
          <Box
            sx={{
              display: "flex",
              justifyContent: "center",
              mb: 4,
              px: { xs: "10%", sm: "20%" },
            }}
          >
            <TextField
              id="password"
              type="password"
              label="Password"
              fullWidth
            />
          </Box>
          <Box sx={{ display: "flex", justifyContent: "center" }}>
            <Button color="primary" variant="contained" size="large">
              Login
            </Button>
          </Box>
        </Paper>
      </Container>
    </ThemeProvider>
  );
}
