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 { Divider, Typography } from "@mui/material";

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

const AppBar: React.FC<AppBarProps> = ({ avatarImageSrc, profileName }) => {
  return (
    <I18nProvider namespaces={["common"]}>
      <MUIAppBar position="sticky" color="default" elevation={4}>
        <Toolbar>
          <NavigationToggle />
          <Box
            sx={{ flexGrow: 1, display: "flex", justifyContent: "flex-end", flexDirection: "column", alignItems: "flex-end" }}
          >
            <Profile
              avatarImageSrc={avatarImageSrc}
              profileName={profileName}
            />
            <Typography sx={{ mx: "1rem" }} fontWeight="bold">
              {profileName}
            </Typography>
          </Box>
        </Toolbar>
      </MUIAppBar>
    </I18nProvider>
  );
};

export default AppBar;