import * as React from "react";
import { Box, IconButton, Typography } from "@mui/material";
import theme from "../../../theme";
import ExitToAppOutlinedIcon from "@mui/icons-material/ExitToAppOutlined";
import Logo from "../../Logo";
import { clearAuthToken } from "@frontend/kitui";
import { logout } from "@root/api/auth";

const Header: React.FC = () => {
  return (
    <React.Fragment>
      <Box
        sx={{
          backgroundColor: theme.palette.menu.main,
          width: "100%",
          minHeight: "85px",
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "wrap",
          paddingLeft: "5px",
        }}
      >
        <Box
          sx={{
            width: "150px",
            display: "flex",
            justifyContent: "right",
            alignItems: "center",
          }}
        >
          <Logo />
        </Box>

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

          <IconButton
            onClick={() => {
              logout().then(clearAuthToken);
            }}
            sx={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "center",
              alignItems: "center",
              cursor: "pointer",
              padding: "0 31px",
            }}
          >
            <ExitToAppOutlinedIcon
              sx={{
                color: theme.palette.golden.main,
                transform: "scale(1.3)",
              }}
            />
          </IconButton>
        </Box>
      </Box>
    </React.Fragment>
  );
};

export default Header;