import { Typography } from "@mui/material";
import React, { PropsWithChildren } from "react";

export function MoneyMgrWebRouteContainer(
  p: {
    label: string | React.ReactElement;
    actions?: React.ReactElement;
  } & PropsWithChildren
): React.ReactElement {
  return (
    <div
      style={{
        margin: "50px",
        flexGrow: 1,
        flexShrink: 0,
        flexBasis: 0,
        minWidth: 0,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: "20px",
        }}
      >
        <Typography variant="h4">{p.label}</Typography>
        {p.actions ?? <></>}
      </div>

      {p.children}
    </div>
  );
}