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",
            }}
          >
            {p.title && (
              <Typography variant="h5" style={{ marginBottom: "15px" }}>
                {p.title}
              </Typography>
            )}
            {p.actions}
          </span>
        )}
        {p.children}
      </Paper>
    </Grid>
  );
}