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 { 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={["navigation", "common"]}>
      <MUIAppBar position="sticky" color="default" elevation={0}>
        <Toolbar sx={{ minHeight: { xs: 56, sm: 64 }, px: 2 }}>
            <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",
                alignItems: "center",
                gap: 1,
              }}
            >
              <Profile
                avatarImageSrc={avatarImageSrc}
                profileName={profileName}
              />
              <Typography variant="body2" sx={{ fontWeight: 600, color: "text.secondary" }}>
                {profileName}
              </Typography>
            </Box>
        </Toolbar>
      </MUIAppBar>
    </I18nProvider>
  );
};

export default AppBar;
