import React from "react";

import AppBar from "@mui/material/AppBar";
import Toolbar from "@mui/material/Toolbar";

export const ActionBar: React.FC<React.PropsWithChildren> = ({ children }) => (
  <AppBar
    elevation={0}
    sx={{
      bgcolor: { xs: "transparent", sm: "background.paper" },
      borderTopWidth: { xs: 0, sm: 1 },
      borderTopStyle: "solid",
      borderTopColor: "divider",
      bottom: 0,
      left: 0,
      position: { xs: "static", sm: "sticky" },
      mt: "auto",
      order: { xs: -1, sm: 9999 },
    }}
  >
    <Toolbar sx={{ justifyContent: "flex-end", display: "flex", gap: 2 }}>{children}</Toolbar>
  </AppBar>
);
export default ActionBar;