import { Box, Stack } from "@mui/material";
import { Settings } from "./Settings/Settings";
import { WindowButtons } from "./WindowButtons";

export const HeaderBar = () => {
  return (
    <Box
      className="titlebar"
      data-tauri-drag-region="true"
      sx={{
        alignItems: "center",
        // backdropFilter: "blur(10px)",
        // backgroundColor: "rgba(0, 0, 0, 0.5)",
        // TODO: remove when done
        // borderBottom: "1px solid red",
        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",
        }}
      >
        hello this is the left side
      </Box>
      <Box
        className="titlebar"
        data-tauri-drag-region="true"
        sx={{
          alignItems: "center",
          display: "flex",
          flexDirection: "row",
        }}
      >
        <Stack
          direction="row"
          spacing={2}
          sx={{
            alignItems: "center",
            display: "flex",
            flexDirection: "row",
          }}
        >
          <Settings />
          <WindowButtons />
        </Stack>
      </Box>
    </Box>
  );
};
