import MUIAppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";
import React from "react";
import Profile from "./Profile";
import Box from "@mui/material/Box";
import NavigationToggle from "./NavigationToggle";
import { I18nProvider } from "@/i18n";
import { authOptions } from "@/config/authConfig";
import { getServerSession } from "next-auth";

export interface AppBarProps {
  avatarImageSrc?: string;
  profileName: string;
}

const AppBar: React.FC<AppBarProps> = async ({ avatarImageSrc, profileName }) => {
    const session = await getServerSession(authOptions) as any;
    const abilities: string[] = session.abilities
    const username: string = session.user.name
    // console.log(abilities)
  return (
    <I18nProvider namespaces={["login", "common"]}>
      <MUIAppBar position="sticky" color="default" elevation={4}>
        <Toolbar>
          <NavigationToggle abilities={abilities} username={username}/>
          <Box
            sx={{ flexGrow: 1, display: "flex", justifyContent: "flex-end" }}
          >
            <Profile
              avatarImageSrc={avatarImageSrc}
              profileName={profileName}
            />
          </Box>
        </Toolbar>
      </MUIAppBar>
    </I18nProvider>
  );
};

export default AppBar;
