import { Box, Stack } from "@mui/material";
import { WindowButtons } from "./WindowButtons";
import { NavigationButtons } from "./NavigationButtons";
import { RouteDisplay } from "./RouteDisplay";
import { Testing } from "../Testing/Testing";
import { ServerStatus } from "./ServerStatus";

export const HeaderBar = () => {
  return (
    <Box
      className="titlebar"
      data-tauri-drag-region="true"
      sx={{
        alignItems: "center",
        display: "flex",
        flexDirection: "row",
        height: "48px",
        justifyContent: "space-between",
        p: 1,
      }}
    >
      <Box
        className="titlebar"
        data-tauri-drag-region="true"
        sx={{
          alignItems: "center",
          display: "flex",
          flexDirection: "row",
        }}
      >
        {/* this is the left side */}
        <Stack
          direction="row"
          spacing={2}
          sx={{
            alignItems: "center",
            display: "flex",
            flexDirection: "row",
          }}
        >
          <NavigationButtons />
          <RouteDisplay />
        </Stack>
      </Box>
      <Box
        className="titlebar"
        data-tauri-drag-region="true"
        sx={{
          alignItems: "center",
          display: "flex",
          flexDirection: "row",
        }}
      >
        {/* this is the middle, probably not gonna be used */}
      </Box>
      <Box
        className="titlebar"
        data-tauri-drag-region="true"
        sx={{
          alignItems: "center",
          display: "flex",
          flexDirection: "row",
        }}
      >
        {/* this is the right side */}
        <Stack
          direction="row"
          spacing={2}
          sx={{
            alignItems: "center",
            display: "flex",
            flexDirection: "row",
          }}
        >
          <ServerStatus />
          <Testing />
          <WindowButtons />
        </Stack>
      </Box>
    </Box>
  );
};
