/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
import { Paper, Typography } from "@mui/material";
import React, { PropsWithChildren } from "react";
import Grid from "@mui/material/Grid";

export function EditSection(
  p: {
    title?: string;
    actions?: React.ReactElement;
    fullWidth?: boolean;
  } & PropsWithChildren
): React.ReactElement {
  return (
    <Grid size={{ sm: 12, md: p.fullWidth ? 12 : 6 }}>
      <Paper style={{ margin: "10px", padding: "10px" }}>
        {(p.title || p.actions) && (
          <span
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              marginBottom: "15px",
            }}
          >
            {p.title && <Typography variant="h5">{p.title}</Typography>}
            {p.actions}
          </span>
        )}
        {p.children}
      </Paper>
    </Grid>
  );
}