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, Grid, Typography } from "@mui/material";
import Breadcrumb from "@/components/Breadcrumb";
import { NAVIGATION_CONTENT_WIDTH } from "@/config/uiConfig";

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={{ml: NAVIGATION_CONTENT_WIDTH, display: { xs: "none", xl: "block" } }}>
              <Breadcrumb />
            </Box>
            <Box sx={{display: { xl: "none" } }}>
              <Breadcrumb />
            </Box>
            <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;
