// TODO: implement navigation buffer after implementing internal routing

import { ArrowBack, ArrowForward, HomeOutlined } from "@mui/icons-material";
import { Box, IconButton, Stack } from "@mui/material";
import { useAtom } from "jotai";
import { routeAtom } from "../../lib/jotai";

export const NavigationButtons = () => {
  // atoms
  const [route, setRoute] = useAtom(routeAtom);

  const goBack = () => {
    // TODO
  };

  const goForward = () => {
    // TODO
  };

  const goHome = () => {
    setRoute("home");
  };

  return (
    <Box
      sx={{
        alignItems: "center",
        display: "flex",
        flexDirection: "row",
      }}
    >
      <Stack
        direction='row'
        spacing={1}
      >
        <IconButton
          onClick={goBack}
          size='small'
        >
          <ArrowBack fontSize='inherit' />
        </IconButton>
        <IconButton
          onClick={goForward}
          size='small'
        >
          <ArrowForward fontSize='inherit' />
        </IconButton>
        <IconButton
          onClick={goHome}
          size='small'
        >
          <HomeOutlined fontSize='inherit' />
        </IconButton>
      </Stack>
    </Box>
  );
};
