import * as React from "react";
import { Box, Typography } from "@mui/material";
import theme from "../../theme";
import ExitToAppOutlinedIcon from '@mui/icons-material/ExitToAppOutlined';
import Logo from "../Logo";


const Header: React.FC = () =>  {
  return (
    <React.Fragment>
      <Box sx={{
        backgroundColor: theme.palette.menu.main,
        width: "100%",
        height: "85px",
        borderBottom: "1px solid",
        borderColor: theme.palette.grayDark.main,
        display: "flex",
        justifyContent: "space-between"
      }}>
        <Box sx={{
          width: "150px",
          display: "flex",
          justifyContent: "right",
          alignItems: "center"
        }}>
          <Logo />
        </Box>

        <Box sx={{
          display: "flex"
        }}>
          <Typography 
            variant="h6"
            sx={{
              width: "230px",
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              fontWeight: "normal"
            }}
          >
              Добро пожаловать, Администратор сервиса
          </Typography>

          <Box sx={{
            width: "85px",
            display: "flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center",
            cursor: "pointer"
          }}>
            <ExitToAppOutlinedIcon sx={{
              color: theme.palette.golden.main,
              transform: "scale(1.3)"
            }} />
          </Box>
        </Box>
      </Box>
    </React.Fragment>
  );
}


export default Header;