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

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